首页 > 关于一个飘浮去效果的小小疑惑(下面两个注释)

关于一个飘浮去效果的小小疑惑(下面两个注释)

html<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
*{margin:0px; margin:0px;}
body{background:#8a234e url(bg.png) no-repeat center 0;}
#div1{position:relative; width:500px; height:260px;  margin:146px auto 0; overflow:hidden; }
#div1 a{ position:absolute; color:#000; text-decoration:none; top:260px; display:block; border:solid 1px #000; background:#fff; filter:alpha(opacity:30); opacity:0.3; font-size:14px; padding:3px 5px; font-family:arial;}
#div1 a:hover { filter:alpha(opacity:100); opacity:1; font-weight:bold; font-size:16px; }
</style>


<script type="text/javascript">
window.onload=function()
{
    var oDiv=document.getElementById('div1');
    var aA=document.getElementsByTagName('a');
    var i=0;
    for(i=0;i<aA.length;i++)
    {
        aA[i].pause=1;
        aA[i].time=null;
        initialize(aA[i]);
        aA[i].onmouseover=function()
        {
            this.pause=0;    
        };
        aA[i].onmouseout=function()
        {
            this.pause=1;
        };
    }
    setInterval(starmove,24);
    function starmove()
    {
        for(i=0;i<aA.length;i++)
        {
            if(aA[i].pause)
            {
                domove(aA[i]);
            }
        }
    }
    function domove(obj)
    {
        if(obj.offsetTop<=-obj.offsetHeight)
        {
            obj.style.top=oDiv.offsetHeight+"px";
            initialize(obj);
        }
        else
        {
            obj.style.top=obj.offsetTop-obj.ispeed+"px";    
        }
    }
    function initialize(obj)
    {
        var iLeft=parseInt(Math.random()*oDiv.offsetWidth);
        var scale=Math.random()*1+1;
        var iTimer=parseInt(Math.random()*1500);
       //这里为什么要设置obj.pause=0,不设置好像也没有关系吧?
        obj.pause=0;

        obj.style.fontSize=12*scale+'px';

        if((iLeft-obj.offsetWidth)>0)
        {
            obj.style.left=iLeft-obj.offsetWidth+"px";
        }
        else
        {
            obj.style.left=iLeft+"px";
        }
        clearTimeout(obj.time);
         //这里为什么要运定时器,不用不一样可以运行么?这个作用是什么?
        obj.time=setTimeout(function(){
            obj.pause=1;
        },iTimer);
        obj.ispeed=Math.ceil(Math.random()*4)+1;
    }
};
</script>


</head>
<body>


<div id="div1">
    <a href="#" target="_blank">JS课程</a>
    <a href="#" target="_blank">教程</a>
    <a href="#" target="_blank">试听</a>
    <a href="#" target="_blank">精品</a>
</div>


</body>
</html>

//意思是移动的元素到达视窗以外之后 starmove 函数中 `if(aA[i].pause)`中为false.
obj.pause = 0;

 /*设定多少时间后将obj.pause = 1;即 starmove 函数中 `if(aA[i].pause)`中为true.
   不能将其删除不然 domove 函数不能执行*/
obj.time=setTimeout(function(){
        obj.pause=1;
},iTimer);

obj.pause 为自定义属性.
【热门文章】
【热门文章】