学习blus老师js(3)--定时器的使用

1.无缝滚动——基础

物体运动基础

让Div移动起来

offsetLeft的作用

用定时器让物体连续移动

offsetLeft：

获取物体的左边距；最大的优点在于可以综合考虑所有影响这个物体位置的因素之后，得出来一个最终的结论。

如果仅仅取left，margin就考虑不到；

offsetLeft/offsetTop : offsetTop获取物体的上边距

offsetWidth/offsetHeight : 获取物体的宽度以及高度；

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:200px; height:200px; background:red; position:absolute; left:200px; top:150px; margin:50px;}
</style>
</head>

<body>
<div id="div1" onclick="alert(this.offsetLeft);">
</div>
</body>
</html>

View Code

无缝滚动demo：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
* {margin:0; padding:0;}
#div1 {width:712px; height:108px; margin:100px auto; position:relative; background:red; overflow:hidden;}
#div1 ul {position:absolute; left:0; top:0;}
#div1 ul li {float:left; width:178px; height:108px; list-style:none;}
</style>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById('div1');
    var oUl=oDiv.getElementsByTagName('ul')[0];
    var aLi=oUl.getElementsByTagName('li');
    
    var speed=-2;
    
    oUl.innerHTML+=oUl.innerHTML;
    oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
    
    function move(){
        if(oUl.offsetLeft<-oUl.offsetWidth/2)
        {
            oUl.style.left='0';
        }
        if(oUl.offsetLeft>0)
        {
            oUl.style.left=-oUl.offsetWidth/2+'px';
        }
        oUl.style.left=oUl.offsetLeft+speed+'px';
    }
    var timer=setInterval(move, 30);
    
    oDiv.onmouseover=function ()
    {
        clearInterval(timer);
    };
    
    oDiv.onmouseout=function ()
    {
        timer=setInterval(move, 30);
    };
    
    document.getElementsByTagName('a')[0].onclick=function ()
    {
        speed=-2;
    };
    document.getElementsByTagName('a')[1].onclick=function ()
    {
        speed=2;
    };
};
</script>
</head>

<body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<div id="div1">
    <ul>
        <li><img src="img2/1.jpg" /></li>
        <li><img src="img2/2.jpg" /></li>
        <li><img src="img2/3.jpg" /></li>
        <li><img src="img2/4.jpg" /></li>
    </ul>
</div>
</body>
</html>

------------

posted on 2017-10-15 00:36 有点懒惰的大青年阅读(264) 评论(0) 编辑收藏举报