js 實(shí)用的無間斷滾動圖效果(良好兼容性)
更新時間:2010年06月07日 22:31:26 作者:
網(wǎng)上有不少圖片滾動的效果代碼,但大多兼容性不好,或者結(jié)構(gòu)混亂,xhtml,css,js 均沒有得到良好的優(yōu)化。
下面介紹一個方法;基本上實(shí)現(xiàn)結(jié)構(gòu)跟行為相分離,兩者的聯(lián)系只需要一個
id就可以,使用起來很方便,而且同一個js代碼可以實(shí)現(xiàn)在本頁面多個滾動圖效果,之間互不干擾,
1.xhtml
<div class="demo" id="demo1">
<table cellpadding="0" cellspacing="0">
<tr>
<td><ul>
<li><img src="img.jpg"><br>
滾動圖1</li>
<li><img src="img.jpg"><br>
滾動圖2</li>
<li><img src="img.jpg"><br>
滾動圖3</li>
<li><img src="img.jpg"><br>
滾動圖4</li>
</ul></td>
</tr>
</table>
</div>
<!--第二個滾動圖開始-->
<div class="demo" id="demo2">
<table cellpadding="0" cellspacing="0">
<tr>
<td><ul>
<li><img src="img.jpg"><br>
滾動圖1</li>
<li><img src="img.jpg"><br>
滾動圖2</li>
<li><img src="img.jpg"><br>
滾動圖3</li>
<li><img src="img.jpg"><br>
滾動圖4</li>
</ul></td>
</tr>
</table>
</div>
2.css
ul,li,img,td{font-size:12px;list-style-type:none;text-align:center;margin:0;padding:0;}
.demo{width:230px;margin-bottom:8px;height:172px;overflow:hidden;}
.demo ul{width:408px;clear:both;}
.demo li{width:102px;float:left;text-align:center;}
.demo img{margin-bottom:8px;}
3.js
function startmarquee(lh,speed,delay,index){
var o=document.getElementById("demo"+index);
var o_td=o.getElementsByTagName("td")[0];
var str=o_td.innerHTML;
var newtd=document.createElement("td");
newtd.innerHTML=str;
o_td.parentNode.appendChild(newtd);
var t;
var p=false;
o.onmouseover=function(){p=true;}
o.onmouseout=function() {p=false;}
function start(){
t=setInterval(Marquee,speed);
if(!p){o.scrollLeft += 3;}
}
function Marquee(){
if(o_td.offsetWidth-o.scrollLeft<=0)
o.scrollLeft-=o_td.offsetWidth;
else{
if(o.scrollLeft%lh!=0){
o.scrollLeft+= 3
}else{clearInterval(t); setTimeout(start,delay);}
}
}
setTimeout(start,delay);
}
startmarquee(102,1,1500,1);//圖片間停式滾動
startmarquee(102,30,1,2);//圖片不間斷滾動
測試代碼:js需要在html文件加載完成后執(zhí)行,才能正常運(yùn)行,所以記得將js放到div之后;圖片滾動跟文字滾動實(shí)現(xiàn)原理上大同小異。
演示代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
代碼中,是針對102寬度的圖片,可以在代碼中修改,適合自己圖片大小的寬度,才可以完美的運(yùn)行。
id就可以,使用起來很方便,而且同一個js代碼可以實(shí)現(xiàn)在本頁面多個滾動圖效果,之間互不干擾,
1.xhtml
復(fù)制代碼 代碼如下:
<div class="demo" id="demo1">
<table cellpadding="0" cellspacing="0">
<tr>
<td><ul>
<li><img src="img.jpg"><br>
滾動圖1</li>
<li><img src="img.jpg"><br>
滾動圖2</li>
<li><img src="img.jpg"><br>
滾動圖3</li>
<li><img src="img.jpg"><br>
滾動圖4</li>
</ul></td>
</tr>
</table>
</div>
<!--第二個滾動圖開始-->
<div class="demo" id="demo2">
<table cellpadding="0" cellspacing="0">
<tr>
<td><ul>
<li><img src="img.jpg"><br>
滾動圖1</li>
<li><img src="img.jpg"><br>
滾動圖2</li>
<li><img src="img.jpg"><br>
滾動圖3</li>
<li><img src="img.jpg"><br>
滾動圖4</li>
</ul></td>
</tr>
</table>
</div>
2.css
復(fù)制代碼 代碼如下:
ul,li,img,td{font-size:12px;list-style-type:none;text-align:center;margin:0;padding:0;}
.demo{width:230px;margin-bottom:8px;height:172px;overflow:hidden;}
.demo ul{width:408px;clear:both;}
.demo li{width:102px;float:left;text-align:center;}
.demo img{margin-bottom:8px;}
3.js
復(fù)制代碼 代碼如下:
function startmarquee(lh,speed,delay,index){
var o=document.getElementById("demo"+index);
var o_td=o.getElementsByTagName("td")[0];
var str=o_td.innerHTML;
var newtd=document.createElement("td");
newtd.innerHTML=str;
o_td.parentNode.appendChild(newtd);
var t;
var p=false;
o.onmouseover=function(){p=true;}
o.onmouseout=function() {p=false;}
function start(){
t=setInterval(Marquee,speed);
if(!p){o.scrollLeft += 3;}
}
function Marquee(){
if(o_td.offsetWidth-o.scrollLeft<=0)
o.scrollLeft-=o_td.offsetWidth;
else{
if(o.scrollLeft%lh!=0){
o.scrollLeft+= 3
}else{clearInterval(t); setTimeout(start,delay);}
}
}
setTimeout(start,delay);
}
startmarquee(102,1,1500,1);//圖片間停式滾動
startmarquee(102,30,1,2);//圖片不間斷滾動
測試代碼:js需要在html文件加載完成后執(zhí)行,才能正常運(yùn)行,所以記得將js放到div之后;圖片滾動跟文字滾動實(shí)現(xiàn)原理上大同小異。
演示代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
代碼中,是針對102寬度的圖片,可以在代碼中修改,適合自己圖片大小的寬度,才可以完美的運(yùn)行。
您可能感興趣的文章:
- IE與Firefox下javascript getyear年份的兼容性寫法
- javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
- Javascript 多瀏覽器兼容性問題及解決方案
- 兼容性非常好的js右下角與漂浮廣告代碼
- js onkeypress與onkeydown 事件區(qū)別詳細(xì)說明
- 利用Javascript判斷操作系統(tǒng)的類型實(shí)現(xiàn)不同操作系統(tǒng)下的兼容性
- 原生javascript兼容性測試實(shí)例
- css與javascript跨瀏覽器兼容性總結(jié)
- JavaScript onkeypress事件入門實(shí)例(按下或按住一個鍵盤按鍵)
- JS onkeypress兼容性寫法詳解
相關(guān)文章
JS+FLASH幻燈片播放圖片腳本,整理了代碼,使得調(diào)用更加方便!
JS+FLASH幻燈片播放圖片腳本,整理了代碼,使得調(diào)用更加方便!...2007-01-01完全用CSS實(shí)現(xiàn)鼠標(biāo)移動到圖片并更換圖片
CSS實(shí)現(xiàn)鼠標(biāo)移動到圖片,更換圖片,這是一個完全用CSS實(shí)現(xiàn)的效果,由此我們可以制作一些效果復(fù)雜的按鈕,比如換色按鈕2012-12-12發(fā)一個自己用JS寫的實(shí)用看圖工具實(shí)現(xiàn)代碼
所以決定慢慢來照顧一下博客吧,這里先把眼前就有的一個小東西拿出來和大家分享一下,這是2006年的時候(文本里記下了時間,不然也忘記了)為了自己看網(wǎng)絡(luò)圖片方便而寫的。2008-07-07javascript入門·圖片對象(無刷新變換圖片)\滾動圖像
javascript入門·圖片對象(無刷新變換圖片)\滾動圖像...2007-10-10js實(shí)現(xiàn)運(yùn)動logo圖片效果及運(yùn)動元素對象sportBox使用方法
Js實(shí)現(xiàn)運(yùn)動的圖片特效,兩個網(wǎng)站Logo快速運(yùn)動類似顯示器屏保。借此練習(xí)運(yùn)動元素對象sportBox的使用方法,需要了解的朋友可以參考下2012-12-12