㈠ 有些網頁上的圖片可以在整個頁面來回移動,怎麼做到的
學習了
㈡ 網頁製作怎樣讓圖片滾動
網頁圖片無縫滾動實現代碼:
<style type="text/css">
<!--
ul,li,div{margin:0; padding:0; font-size:12px;}
#demo {
width:678px; float:right; overflow:hidden;height:144px; border:none;
}
#indemo {
float: left;
width: 800%;
}
#demo1,#demo2{height:144px;float:left; display:inline-table;}
#demo1 li,#demo2 li{ width:127px; height:144px; float:left; padding-left:8px; }
#demo1 li img,#demo2 li img{ display:block; background:#ccc; padding:1px; border:1px solid #ccc;}
#demo1 li span,#demo2 li span{ width:127px; height:30px; line-height:30px; text-align:center; overflow:hidden;}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<ul>
<li><a href="#"><img src="http://boaer.comimg/temp01.gif" width="123" height="110" /></a><span><a href="#">產品名稱</a></span></li>
<li><a href="#"><img src="http://boaer.comimg/temp02.gif" width="123" height="110" /></a><span><a href="#">產品名稱</a></span></li>
<li><a href="#"><img src="http://boaer.comimg/temp03.gif" height="110" /></a><span><a href="#">產品名稱</a></span></li>
</ul></div><div id="圖片展示代碼例子"></div></div></div><script>
<!--
var speed=20; //數字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script></td>
</tr>
</table>
㈢ 網頁製作圖片滾動
<marqueedirection=upheight=75onMouseOut=this.start()onMouseOver=this.stop()scrollamount=1scrolldelay=100width="180"id=MARQUEE1>滾動內容</marquee>
Direction參數可設置:updownleftright(控制滾動方向)
Scrolldelay=100(100就是速度,值越大滾動越快……)
onMouseOut=this.start()........滑鼠移出狀態滾動
onMouseOver=this.stop().........滑鼠經過時停止滾動
基本語法
<marquee>...</marquee>
移動屬性的設置,這種移動不僅僅局限於文字,也可以應用於圖片,表格等等
方向
<direction=#>#=left,right,up,down<marqueedirection=left>從右向左移!</marquee>
方式
<bihavior=#>#=scroll,slide,alternate<marqueebehavior=scroll>一圈一圈繞著走!</marquee>
<marqueebehavior=slide>只走一次就歇了!</marquee>
<marqueebehavior=alternate>來回走</marquee>
循環
<loop=#>#=次數;若未指定則循環不止(infinite)<marqueeloop=3width=50%behavior=scroll>只走3趟</marquee><P>
<marqueeloop=3width=50%behavior=slide>只走3趟</marquee>
<marqueeloop=3width=50%behavior=alternate>只走3趟!</marquee>
速度
<scrollamount=#><marqueescrollamount=20>啦啦啦,我走得好快喲!</marquee>
延時
<scrolldelay=#><marqueescrolldelay=500scrollamount=100>啦啦啦,我走一步,停一停!</marquee>
外觀(Layout)設置
對齊方式(Align)
<align=#>#=top,middle,bottom<fontsize=6>
<marqueealign=#width=400>啦啦啦,我會移動耶!</marquee>
</font>
底色
<bgcolor=#>#=rrggbb16進制數碼,或者是下列預定義色彩:
Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,
Fuchsia,White,Green,Purple,Silver,Yellow,Aqua<marqueebgcolor=aaaaee>顏色!</marquee>
面積
<height=#width=#><marqueeheight=40width=50%bgcolor=aaeeaa>面積!</marquee>
空白
(Margins)<hspace=#vspace=#>
<marqueehspace=20vspace=20width=150bgcolor=ffaaaaalign=middle>面積!</marquee>
㈣ 急求!!!在網頁中怎樣讓幾張連續圖片來回滾動,用HTML什麼代碼謝了
<marquee scrollamount="5" width="700" height="146"><br><p><a href="點擊圖片後跳轉的地址" target="_blank"><img src="圖片地址" style="width: 120px; height: 120px;" width="120" border="0" height="120"></a>
</marquee>
--------------------------------------------------------------------------------------------------------------------------
還可以加入如下滑鼠事件,當滑鼠劃過時停止。
</marquee onmouseover=this.stop(); onmouseout=this.start(); >
</marquee>
㈤ 網頁上怎麼製作滾動的圖片
網站循環滾動圖片需要js代碼製作
第一步,可以去相關的js特效網站下載一個你所需要的代碼
第二步,用DW修改路徑改為你自己網站的路徑
第三步,把你所做的圖片上傳到空間
第四步,添加代碼路徑及調用js文件網站保存
㈥ 網頁製作中的滾動圖片是如何做出來的
你如果是問在網頁製作中的滾動圖片是如何做出來的話,你可以在Flash中做好在導入到網頁製作軟體中就可以了
㈦ 網頁設計怎樣使圖片在網頁中任意的飄來飄去,例如廣告圖片之類的
可以用jQuery寫
1.漂浮的窗口肯定是position:absolute脫離文檔流的
2.在瀏覽器可視范圍內飄動
3.飄動過程可分解為垂直(上、下)和水平(左、右)方向,同一時間內會同時向垂直和水平兩個方向同時移動,可能的情況會有上左、上右、下左、下右
基本的思路是創建一個函數,函數的作用是使元素移動,然後定時執行這個函數,以讓元素持續移動,形成漂浮效果。基本上這些持續的元素移動都是基於 setInterval(func,delay) 函數,例如:setInterval(move,30),第一個參數是要定時執行的函數,第二個參數是時間間隔,單位是毫秒
詳情參考網頁:
網頁鏈接
這個更簡單,希望你能看得懂
網頁鏈接