<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图片漂浮</title>
<style type="text/css">
*{margin:0;padding: 0;}
#box{
position: absolute;
top: 0px;
left: 0px;
}
</style>
<script type="text/javascript">
window.onload = function () {
var box=document.getElementById("box");
var time=null,x= 1,y= 1,speed=5;
function go(){
//水平方向
if((box.offsetLeft+box.offsetWidth)>document.documentElement.clientWidth){
x=-1;
}
if(box.offsetLeft<0){
x=1;
}
box.style.left=box.offsetLeft+x*speed+"px";
//垂直方向
if((box.offsetTop+box.offsetHeight)>document.documentElement.clientHeight){
y=-1;
}
if(box.offsetTop<0){
y=1;
}
box.style.top=box.offsetTop+x*speed+"px";
}
//定时函数
time=setInterval(go,100);
//鼠标移上去 停止
box.onmousemove=function(){
if(time!=null){
clearInterval(time);
}
}
//鼠标离开 继续移动
box.onmouseout=function(){
time=setInterval(go,100);
}
}
</script>
</head>
<body>
<div id="box">
<img src="../images/cat.jpg" height="200px" width="200px">
</div>
</body>
</html>