首页 新闻 搜索 专区 学院

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

0
悬赏园豆:20 [已解决问题] 解决于 2015-01-29 18:01
<!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>
Mi文的主页 Mi文 | 初学一级 | 园豆:6
提问于:2015-01-18 10:43
< >
分享
最佳答案
0

下面是我的解答,互相学习~~~

这个是有作用的,不过作用也很简单,就是在一个a标签消失时不让它立马重新从底部出现,而是隔一段时间再出现(代码中是1.5s内的一个随机数)

function starmove()
            {
                for(i=0;i<aA.length;i++)
                {
                    if(aA[i].pause) // pause为1就滑动a标签
                    {
                        domove(aA[i]);
                    }
                }
            }

这一段是关键代码,当pause为0时,是不会移动的。

收获园豆:20
进击的小矮人 | 菜鸟二级 |园豆:316 | 2015-01-26 11:34
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册