日期:2014-05-16  浏览次数:20319 次

JS实现漂浮广告
HTML code

<html>
<head>
<title>漂浮广告</title>
<body>
<div id="codefans_net" style="position:absolute">
<!--链接地址--><a href="#" target="_blank">
<!--图片地址--><img src="s/images/list2.jpg" border="0">
</a>
</div>
<script> 
var x = 50,y = 60 
var xin = true, yin = true 
var step = 1
var delay = 10 
var obj=document.getElementById("codefans_net") 
function float() { 
var L=T=0
var R= document.body.clientWidth-obj.offsetWidth 

var B = document.body.clientHeight-obj.offsetHeight 

obj.style.left = x + document.body.scrollLeft 
alert(obj.style.left);
obj.style.top = y + document.body.scrollTop 
x = x + step*(xin?1:-1) 
if (x < L) { xin = true; x = L} 
if (x > R){ xin = false; x = R} 
y = y + step*(yin?1:-1) 
if (y < T) { yin = true; y = T } 
if (y > B) { yin = false; y = B } 
} 
var itl= setInterval("float()", delay) 
obj.onmouseover=function(){clearInterval(itl)} 
obj.onmouseout=function(){itl=setInterval("float()", delay)} 
</script>
</body>
</html>



谁帮我解释一下这段代码的实现思路。本人刚学JS一个星期。很多属性都不是很明白。如:“ document.body.scrollLeft ”,obj.offsetWidth(这个是div的宽度?) 


obj.onmouseover=function(){clearInterval(itl)} 鼠标悬浮就清除?

x = x + step*(xin?1:-1) 这个表达式没看懂。归递?

求思路、、



------解决方案--------------------
JScript code
x = x + step*(xin?1:-1) //就是往右(xin==true)或往左(xin==false)移动