1. 程式人生 > >HTML中實現圖片滾動效果

HTML中實現圖片滾動效果

HTML中實現滾動效果網頁中多的不能再說了,一般的網站都有圖片滾動效果,突然滾動出一個美女讓你點選,這樣也是一個網站獲取流量的方式,今天我也做了個測試,實現簡單的圖片滾動效果

<marquee  onmouseover=stop()  onmouseout=start()  scrollAmount=15  loop=infinite  deplay="0"><IMG  src="圖片地址"  ><IMG  src="圖片地址">
</marquee>
註釋:
1) scrollAmount。它表示速度,值越大速度越快。
2) 加入onmouseover=stop() onmouseout=start()程式碼,滑鼠真想圖片的時候圖片停止滾動,當滑鼠離開圖片時圖片繼續滾動

給滾動圖片加超連結
用<a href=>和</a>把<img>包圍。程式碼如下:
<marquee scrollAmount=3 loop=infinitedeplay="0"><a href="連結網址"><img src="圖片網址"border=0></a></marquee>

圖片從右到左滾動
<marquee width=寬height=高 onmouseover=stop() onmouseout=start() scrollAmount=速度loop=infinite deplay="0"><imgsrc="圖片地址 "><img src="圖片地址">···</marquee> 

圖片從下到上滾動
<marquee behavior="scroll" direction=up width="寬"height="高" scrollamount="5" onmouseout="this.start()"><imgsrc="圖片網址 "><img src="圖片網址">···</marquee>

帶有超連結的圖片實現滾動效果
<marquee behavior="scroll" direction=up width="120"height="60" scrollamount="1" scrolldelay="60"onmouseover="this.stop()" onmouseout="this.start()"><a target="cont" href="連線地址"><imgsrc="http://圖片地址" idth="88" height="33"border="0"></a><atarget="cont" href="連線地址"><imgsrc="圖片地址" width="88" height="33"border="0"></a></marquee>

當然你也可以為圖片或則文字加上邊框,使他看起來更舒服。

你可以參照上面說明進行圖片從左向右,從上到下滾動。


2013-11-24:14:45