js 实用的无间断滚动图效果(良好兼容性)_图象特效

WBOY
Lepaskan: 2016-05-16 18:25:28
asal
1231 orang telah melayarinya

下面介绍一个方法;基本上实现结构跟行为相分离,两者的联系只需要一个
id就可以,使用起来很方便,而且同一个js代码可以实现在本页面多个滚动图效果,之间互不干扰,
1.xhtml

复制代码 代码如下:







  • js 实用的无间断滚动图效果(良好兼容性)_图象特效

    滚动图1

  • js 实用的无间断滚动图效果(良好兼容性)_图象特效

    滚动图2

  • js 实用的无间断滚动图效果(良好兼容性)_图象特效

    滚动图3

  • js 实用的无间断滚动图效果(良好兼容性)_图象特效

    滚动图4










  • js 实用的无间断滚动图效果(良好兼容性)_图象特效

    滚动图1

  • js 实用的无间断滚动图效果(良好兼容性)_图象特效

    滚动图2

  • js 实用的无间断滚动图效果(良好兼容性)_图象特效

    滚动图3

  • js 实用的无间断滚动图效果(良好兼容性)_图象特效

    滚动图4




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.scrollLefto.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文件加载完成后执行,才能正常运行,所以记得将js放到div之后;图片滚动跟文字滚动实现原理上大同小异。
演示代码:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

代码中,是针对102宽度的图片,可以在代码中修改,适合自己图片大小的宽度,才可以完美的运行。
Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan