<div id="img" onmouseover="clearInterval(interval)" onmouseout="interval = setInterval('changePos()', delay)" align="middle">
<a href="#" ></a><br><span class="reset" onclick="clearInterval(interval);img.style.visibility = 'hidden'">关闭 X</span>
</div>
<script type="text/javascript">
var xPos=300;
var yPos=200;
var step=1;
var delay=16;
var height=0;
var Hoffset=0;
var Woffset=0;
var yon=0;
var xon=0;
var pause=false;
var interval;
changePos("img") ;
function changePos(objName)
{
var thediv=document.getElementById(objName);
thediv.style.position="absolute";
thediv.style.left=parseInt(window.screen.availWidth*Math.random()) + "px";
thediv.style.top=parseInt(window.screen.availHeight*Math.random()) + "px";
thediv.setAttribute("xDir",1);
thediv.setAttribute("yDir",1);
window.setInterval("randPosition(" + objName + ")","18","JavaScript");
}
function randPosition(obj)
{
var x=parseInt(obj.style.left);
if(x>=1500)
obj.setAttribute("xDir",-1);
if(x<=0)
obj.setAttribute("xDir",1);
x+=parseInt(obj.getAttribute("xDir"));
var y=parseInt(obj.style.top);
if(y>=700)
obj.setAttribute("yDir",-1);
if(y<=0)
obj.setAttribute("yDir",1);
y+=parseInt(obj.getAttribute("yDir"));
obj.style.left=x +"px";
obj.style.top =y +"px";
}
function start() {
img.style.visibility = "visible";
interval = setInterval('changePos()', delay);
}
start();
</script >
<div id="img" style="position: absolute; left: 2px; top: 43px;visibility :visible;"
onmouseover="clearInterval(interval)"
onmouseout="start()" align="middle">
<a href="#"></a><br><span class="reset" onclick="clearInterval(interval);img.style.visibility = 'hidden'">关闭 X</span>
</div>
<script type="text/javascript">
var xPos = 300;
var yPos = 200;
var step = 1;
var delay = 1000;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = false;
var interval;
changePos("img");
function changePos(objName) {
var thediv = document.getElementById(objName);
thediv.style.position = "absolute";
thediv.style.left = parseInt(window.screen.availWidth * Math.random()) + "px";
thediv.style.top = parseInt(window.screen.availHeight * Math.random()) + "px";
thediv.setAttribute("xDir", 1);
thediv.setAttribute("yDir", 1);
//不要这句,要不没次执行都会起动新计时器了
//interval = window.setInterval("randPosition('" + objName + "')", "18", "JavaScript");
}
function randPosition(obj) {
var x = parseInt(obj.style.left);
if (x >= 1500)
obj.setAttribute("xDir", -1);
if (x <= 0)
obj.setAttribute("xDir", 1);
x += parseInt(obj.getAttribute("xDir"));
var y = parseInt(obj.style.top);
if (y >= 700)
obj.setAttribute("yDir", -1);
if (y <= 0)
obj.setAttribute("yDir", 1);
y += parseInt(obj.getAttribute("yDir"));
obj.style.left = x + "px";
obj.style.top = y + "px";
}
function start() {
img.style.visibility = "visible";
interval = setInterval('changePos("img")', delay);
}
start();
</script>
hover清除定时器,离开时续绑定时器
别这么写啊老铁,js不要写在行间,css也不要写在行间,多乱啊!
然后你的定时器管理,这里一个定时器就可以了呀!
再然后你在定时器里去获取元素的属性,很耗性能的!
重新给你写了一段,看看吧
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#img{
position: absolute;
left: 2px;
top: 43px;
visibility:visible;
}
</style>
</head>
<body>
<div id="img">
<span class="reset">关闭×</span>
</div>
<script type="text/javascript">
var floatPos = {
init:function(option){
var _this = floatPos;
_this.delay = 16;
_this.node = document.getElementById(option.obj);
_this.maxWidth = document.documentElement.clientWidth - _this.node.clientWidth;
_this.maxHeight = document.documentElement.clientHeight - _this.node.clientHeight;
_this.moveX = Math.random()>0.5?-1:1;
_this.moveY = Math.random()>0.5?-1:1;
_this.timer = null;
console.log(Math.random());
_this.setRandomPos();
_this.control();
},
setRandomPos:function(){
var _this = floatPos,
radomX = parseInt(_this.maxWidth*Math.random()) + "px",
radomY = parseInt(_this.maxHeight*Math.random()) + "px";
_this.node.style.cssText = 'left:'+ radomX +';top:'+radomY;
_this.nodeX=parseInt(_this.node.style.left);
_this.nodeY=parseInt(_this.node.style.top);
_this.movePos();
},
movePos:function(){
var _this = floatPos;
_this.timer = setInterval(function(){
if(_this.nodeX >= _this.maxWidth){
_this.moveX = -1;
}
if(_this.nodeX < 0){
_this.moveX = 1;
}
if(_this.nodeY>=_this.maxHeight){
_this.moveY = -1;
}
if(_this.nodeY < 0){
_this.moveY = 1;
}
_this.nodeX += _this.moveX;
_this.nodeY += _this.moveY;
_this.node.style.cssText = 'left:'+ _this.nodeX +'px; top:'+_this.nodeY+'px';
},_this.delay);
},
control:function(){
var _this = floatPos;
_this.node.onmouseover = function(){
clearInterval(_this.timer);
}
_this.node.onmouseout = function(){
_this.movePos();
}
}
};
floatPos.init({obj:'img'});
</script >
</body>
</html>