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>

  • 相关阅读:
    SuffixArray
    CodeForces722C
    CodeForces1000C
    浅谈定积分
    浅谈线段树
    飞行员配对方案问题
    FhqTreap的区间翻转
    NOI2004郁闷的出纳员
    二分图匹配
    Far Relative’s Problem (贪心 计算来的最多客人)
  • 原文地址:https://www.cnblogs.com/lihaolihao/p/3523360.html
Copyright © 2011-2022 走看看