漂浮效果

来源：互联网发布：购买淘宝店铺安全吗编辑：程序博客网时间：2024/04/30 10:39
<!doctype html><html><head><title>漂浮效果</title></head><body><div style="position:absolute;" onMouseOver="window.clearInterval(timer)" onMouseOut="creatTimer()">    <img src="images/1.jpg" style="width: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>
0 0