图片无缝滚动实现一
图片无缝滚动代码|www.125jz.com.picutre{overflow: hidden; height: 150px; width: 800px; margin: 0 auto;}
.picutre img{width:200px; height:150px; border:0px;}
|
/*图片滚动效果*/
var speedpic = 20;//速度数值越大速度越慢
document.getElementById("list2").innerHTML = document.getElementById("list1").innerHTML;
function Marqueepic() {
if (document.getElementById("list2").offsetWidth- document.getElementById("list").scrollLeft <= 0) {
document.getElementById("list").scrollLeft -= document.getElementById("list1").offsetWidth;
} else { document.getElementById("list").scrollLeft++; }
}
var MyMarpic = setInterval(Marqueepic, speedpic);
document.getElementById("list").onmouseover = function() {
clearInterval(MyMarpic);
}
document.getElementById("list").onmouseout = function() {
MyMarpic = setInterval(Marqueepic, speedpic);
}
图片无缝滚动实现二
#demo img{ width:180px; height:125px; border:0px;}
|
var speed1=15//数值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee1(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{ demo.scrollLeft++ }
}
var MyMar1=setInterval(Marquee1,speed1)
demo.οnmοuseοver=function() {clearInterval(MyMar1)}
demo.οnmοuseοut=function() {MyMar1=setInterval(Marquee1,speed1)}
本文来自投稿,不代表中国网页设计立场,如若转载,请注明出处:http://www.125jz.com/1181.html