码迷,mamicode.com
首页 > Web开发 > 详细

网页上无缝滚动的实现

时间:2015-08-16 22:51:55      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:

无缝滚动:

1.实现原理:在一个固定大小的div里面(div需要设置overfloow:hidden溢出部分隐藏!)改变图片的offsetleft或者offsetright的值!从而实现图片移动(需要给图片加position:absolute)!

2.改变left或right的值,则需要用到定时器setInterval(调用的函数,调用的时间)

3.当图片的left或则right大于了图片的本身长度,这时候就会出现空白!解决的方法很简单就是复制一个本身!当left或righr大于或等于一般的时候就把left或right重新赋值为0.

代码如下:

 

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{

width: 100px;
height: 100px;
overflow:hidden;
}
li{
float:left;
}
ul{
position:absolute;
left:0px;
top:0px;
}
</style>
</head>
<body>

<div id="div1">
<ul>
<li><img src="img1"></li>
<li><img src="img1"></li>
<li><img src="img1"></li>
</ul>
</div>

</body>
<script type="text/javascript">
var oul=document.getElementById("ul");
var s=5;//定义速度
var fuzhi=oul.innerHTML+oul.innerHTML;
oul.innerHTML=fuzhi;
div1.onclick=function(){

clearInterval(t);
t=setInterval(timer,30);
};
function timer(){
oul.style.left=oul.offsetLeft-sudu+"px";
            if(oul.offsetLeft<=-300){
        oul.style.left=0;
        }


</script>
</html>

 

网页上无缝滚动的实现

标签:

原文地址:http://www.cnblogs.com/12315-/p/4735178.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!