zoukankan      html  css  js  c++  java
  • js 运动的强大版

    /**
    *获取属性
    **/
    
    function getStyle(obj,name){
        if(obj.currentStyle){
            return obj.currentStyle[name];
        }else{
        
            return getComputedStyle(obj,false)[name]
        }
    
    
    }
    
    //  json {500,height:500}
    function startMove(obj,json,func){
        clearInterval(obj.timer);
    
        obj.timer = setInterval(function(){
            for(var name in json){
                    //获取属性的值
                    var value =0;
                    if(name == 'opacity'){
                        value = Math.round(parseFloat(getStyle(obj,name))*100);
                    }else{
                        value = parseInt(getStyle(obj,name));
                    }
    
    
                speed = (json[name] - value)/6;
    
                speed =  speed>0 ? Math.ceil(speed):Math.floor(speed);
                if(Math.abs(json[name] - value)<6){
                    clearInterval(obj.timer);
                    if(name=='opacity'){
                        obj.style.filter = "alpha(opacity:"+json[name]+")";
                        obj.style.opacity = json[name]/100;
                    }else{
                        obj.style[name] = json[name];
                    }
                    if(func)func();
    
                }else{
                    
                    if(name == 'opacity'){
                        obj.style.filter = "alpha(opacity:"+(value+speed)+")";
                        obj.style.opacity = (value+speed)/100;
                    }else{
                    obj.style[name] = value+speed+"px";
                    }        
                
                }
            }
        
        },30)
    
    }

    如何使用:

    <!Doctype html>
    <html>
    <head>
    <style>
    div{200px;height:200px;background:red;margin:30px;float:left;border:3px solid #fff;font-size:20px;}
    
    
    </style>
    <script src="move2.js"></script>
    <script>
    window.onload=function(){
        var oDiv = document.getElementsByTagName("div")[0];
    
        oDiv.timer = null;
        oDiv.onmouseover = function(){    
        
            startMove(oDiv,{500,height:500},function(){alert("运动已完成")});
            
        }
        oDiv.onmouseout = function(){    
            startMove(oDiv,{200,height:200},function(){alert('运动已完成')});
            
        } 
        
    }
    
    
    
    </script>
    </head>
    <body>
    
    <div>我变</div>
    </body>
    </html>

  • 相关阅读:
    文件光标移动
    python的版本的差别 "2","3"
    java通过jdbc操作Excel
    qt通过odbc操作Excel
    qt读取oracle表数据
    virtual box安装oracle_rac_10g
    oracle rac +standby
    rac不完全恢复
    rac完全恢复学习
    oracle rac搭建(三)--安装中的问题
  • 原文地址:https://www.cnblogs.com/lihaolihao/p/3523360.html
Copyright © 2011-2022 走看看