zoukankan      html  css  js  c++  java
  • 漂浮效果

    <!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>
  • 相关阅读:
    前端知识之JavaScript内容(一)
    前端2css层叠样式表
    前端:html初识以及标签
    css
    python--re模块(正则表达式)
    python--xml模块
    关于导包问题
    前端浅了解
    试写仿优酷系统坑点
    sqlalchemy
  • 原文地址:https://www.cnblogs.com/yaobolove/p/4703075.html
Copyright © 2011-2022 走看看