<!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); //這里為什么要設(shè)置obj.pause=0,不設(shè)置好像也沒(méi)有關(guān)系吧?
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); ?//這里為什么要運(yùn)定時(shí)器,不用不一樣可以運(yùn)行么?這個(gè)作用是什么?
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">試聽(tīng)</a>
<a href="#" target="_blank">精品</a>
</div>
</body>
</html>
關(guān)于一個(gè)飄浮去效果的小小疑惑(下面兩個(gè)注釋)
回首憶惘然
2018-12-07 08:28:14