码迷,mamicode.com
首页 > 其他好文 > 详细

漂浮效果

时间:2015-08-04 22:31:19      阅读:95      评论:0      收藏:0      [点我收藏+]

标签:

<!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>

 

漂浮效果

标签:

原文地址:http://www.cnblogs.com/yaobolove/p/4703075.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!