快捷導(dǎo)航

javascript四個(gè)方向無間隙滾動(dòng)合集(多瀏覽器IE,firefox兼容)

更新時(shí)間：2008年05月13日 23:32:52 作者：

比較有想法的四個(gè)方向，多瀏覽器兼容的無縫隙滾動(dòng)效果腳本

學(xué)習(xí)中...本段JS制作參考 MSClass.js

boxmove(d1,d2,d3,e,obj)  
d1 = 外圍容器  
d2 = 內(nèi)容  
d3 = 復(fù)制d2的內(nèi)容接替循環(huán)滾動(dòng)  
e   = 方向與方法  
   1,2,3,4 = 自動(dòng)滾動(dòng)，分別對(duì)應(yīng)：上,右,下,左  
   "top","right","bottom","left" = 手動(dòng)滾動(dòng)，分別對(duì)應(yīng)：上,右,下,左  
    obj = 選擇手動(dòng)滾動(dòng)時(shí)設(shè)置為this，用于事件綁定操作。自動(dòng)滾動(dòng)時(shí)無須設(shè)置。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="PRcss,xhtml,html,css,js,book,個(gè)人主頁,無聊,神經(jīng),懶惰" /> <meta name="description" content="腳本之家提供精品學(xué)習(xí)資料" /> <meta name="Author" content="PRcss,qq:50198763" /> <meta name="Copyright" content="本頁版權(quán)歸PRcss所有。All Rights Reserved" /> <title>滾動(dòng)合集 - m.fzitv.net</title>  <style type="text/css"> div#a,div#b,div#c,div#d { float:left;} h2 { clear:both; } div#b,div#d,div#bb { white-space:nowrap; } </style> </head> <body> <h1>滾動(dòng)合集</h1> <hr /> <h2>向上</h2> <div   class="wppm3vysvbp"   id="a" style="overflow:hidden;height:100px;width:90px;">  <div   class="wppm3vysvbp"   id="a1">  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />   </div>  <div   class="wppm3vysvbp"   id="a2"></div> </div>   <h2>向右</h2> <div   class="wppm3vysvbp"   id="b" style="overflow:hidden;height:100px;width:90px;">  <div   class="wppm3vysvbp"   id="b1"> <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />   </div>  <div   class="wppm3vysvbp"   id="b2"></div> </div>   <h2>向下</h2> <div   class="wppm3vysvbp"   id="c" style="overflow:hidden;height:100px;width:90px;">  <div   class="wppm3vysvbp"   id="c1">  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />   </div>  <div   class="wppm3vysvbp"   id="c2"></div> </div>   <h2>向左</h2> <div   class="wppm3vysvbp"   id="d" style="overflow:hidden;height:100px;width:90px;">  <div   class="wppm3vysvbp"   id="d1">  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />   </div>  <div   class="wppm3vysvbp"   id="d2"></div> </div>   <h2>手動(dòng)滾動(dòng) - <strong onmouseover="boxmove('aa','aa1','aa2','top',this);">上</strong> <strong onmouseover="boxmove('aa','aa1','aa2','bottom',this);">下</strong></h2> <div   class="wppm3vysvbp"   id="aa" style="overflow:hidden;height:100px;width:90px;">  <div   class="wppm3vysvbp"   id="aa1">  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />   </div>  <div   class="wppm3vysvbp"   id="aa2"></div> </div>  <h2>手動(dòng)滾動(dòng) - <strong onmouseover="boxmove('bb','bb1','bb2','left',this);">左</strong> <strong onmouseover="boxmove('bb','bb1','bb2','right',this);">右</strong></h2> <div   class="wppm3vysvbp"   id="bb" style="overflow:hidden;height:100px;width:90px;">  <div   class="wppm3vysvbp"   id="bb1">  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />  <img src="http://m.fzitv.net/images/logo.gif" alt="" />   </div>  <div   class="wppm3vysvbp"   id="bb2"></div> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: