首页 > 代码库 > 无缝滚动案例解析
无缝滚动案例解析
重点在于scrollLeft和offsetWidth这两个属性
原理
定时器其次
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;padding: 0;}
#box{width:900px;border:1px solid pink; margin:100px auto;overflow: auto;}
.boxin{width:800%; }
#left,#right{float: left;}
#right{margin-left:8px;}
</style>
<script type="text/javascript">
window.onload=function(){
var box=document.getElementById("box");
var left=document.getElementById("left");
var right=document.getElementById("right");
right.innerHTML=left.innerHTML;
setInterval(fun,30);
function fun(){
if(box.scrollLeft==0) //scrollLeft表示 被卷曲的左边大小(属性值)--->个人理解为：有滚动轴的话，轴上的滚动按钮往右边滚动的距离。
{
box.scrollLeft=left.offsetWidth; //offsetWidth -->js中获取节点的宽度(属性值)
}
else
{
box.scrollLeft--;
}
//document.getElementById("demo").innerHTML=box.scrollLeft;
}
}
</script>
</head>
<body>
<div id="box">
<div class="boxin">
<div id="left">
<img src="http://www.mamicode.com/1.jpg" />
<img src="http://www.mamicode.com/2.jpg" />
<img src="http://www.mamicode.com/3.jpg" />
<img src="http://www.mamicode.com/4.jpg" />
<img src="http://www.mamicode.com/5.jpg" />
<img src="http://www.mamicode.com/6.jpg" />
<img src="http://www.mamicode.com/7.jpg" />
<img src="http://www.mamicode.com/8.jpg" />
</div>
<div id="right"></div>
</div>
</div>
<div id="demo"></div>
</body>
</html>
无缝滚动案例解析