<!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>
添加回答
举报
0/150
提交
取消