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

Posted 有点懒惰的大青年

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习blus老师js--定时器的使用相关的知识，希望对你有一定的参考价值。

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>

 

 
 

 

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

以上是关于学习blus老师js--定时器的使用的主要内容，如果未能解决你的问题，请参考以下文章

学习blus老师js--DOM

node.js学习使用node.js定时发送邮件任务

js学习笔记8----定时器

js学习笔记（延时器）

如何在使用片段和计时器的选项卡式活动上更新 UI

杨校老师课堂之JavaScript定时器案例的红绿灯设计