<!doctype html>
<html>
<head>
<title>漂浮效果</title>
</head>
<body>
<div style="position:absolute;" onMouseOver="window.clearInterval(timer)" onMouseOut="creatTimer()">
<img src="images/1.jpg" style="160px; height:160px;" />
</div>
<script>
var obj=document.getElementsByTagName("div").item(0);
var clientHeight=document.documentElement.clientHeight;
var clientWidth=document.documentElement.clientWidth;
function randomNum(size){
return Math.floor(Math.random()*(size-160+1));
}
obj.style.top=randomNum(clientHeight)+"px";
obj.style.left=randomNum(clientWidth)+"px";
var y=parseInt(obj.style.top);
var x=parseInt(obj.style.left);
var flagX=false;
var flagY=true;
function moveY(){
if(flagY){
y++;
if(y>clientHeight-160){
flagY=false;
}
}else{
y--;
if(y<0){
flagY=true;
}
}
obj.style.top=y+"px";
}
function moveX(){
if(flagX){
x++;
if(x>clientWidth-160){
flagX=false;
}
}else{
x--;
if(x<0){
flagX=true;
}
}
obj.style.left=x+"px";
}
window.onresize=function(){
clientHeight=document.documentElement.clientHeight;
clientWidth=document.documentElement.clientWidth; }
function creatTimer(){
timer=window.setInterval("moveY(),moveX()",10);
}
creatTimer();
</script>
</body>
</html>