js运动裤（封装一），有回调函数

一、move.js

使用方法：

startMove(oDiv1,{left:-200},function(){

      startMove(oDiv2,{top:0});

 

});

运动裤实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性弹窗</title>
    <script type="text/javascript" src="js/move.js"></script>
    <style>
    *{margin:0;padding:0;}
    #btn{position:absolute; top:0; z-index:5; width:60px; height:20px; background:blue; color:#fff; text-align: center; font-size:12px; cursor:pointer;}
    #div1{position:absolute; top:0; z-index:1; left:-200px; width:200px; height:20px; background:red;}
    #div2{position:absolute; top:0; z-index:1; display:none; top:-300px;  width:200px; height:300px; background:red;}
    #close{ position:absolute; top:0; z-index:6; left:180px; background:black; width:20px; height:20px; cursor:pointer; color:#fff; text-align: center;}
    </style>
</head>
<body>
<div id="btn">点击</div>

<div id="div1"></div>
<div id="div2"><div id="close">×</div></div>
<script>
    var oBtn=document.getElementById("btn");
    var oClose=document.getElementById("close");
    var oDiv1=document.getElementById("div1");
    var oDiv2=document.getElementById("div2");

    oBtn.onclick=show;
    oClose.onclick=close;


    function show(){
        startMove(oDiv1,{left:0},function(){
            oDiv2.style.display="block";
            startMove(oDiv2,{top:0});   //运动对象，运动属性，回调函数
        });
        oBtn.onclick=close;
    }

    function close(){
        startMove(oDiv2,{top:-300},function(){
            oDiv2.style.display="none";
            startMove(oDiv1,{left:-200});
        });
        oBtn.onclick=show;
    }
    
</script>    
</body>
</html>

move.js库完整代码：

/**
*使用方法：startMove(oDiv,{width:200},function(){});
*/
function startMove(obj, json, fnEnd)  //运动对象，运动属性，回调函数
{
    if(obj.timer)
    {
        clearInterval(obj.timer);
    }
    obj.timer=setInterval(function (){
        doMove(obj, json, fnEnd);
    }, 30);
    
    var oDate=new Date();
    
    if(oDate.getTime()-obj.lastMove>30)
    {
        doMove(obj, json, fnEnd);
    }
}

function getStyle(obj, attr)
{
    if(obj.currentStyle)
    {
        return obj.currentStyle[attr];
    }
    else
    {
        return getComputedStyle(obj, false)[attr];
    }
}

function doMove(obj, json, fnEnd)
{
    var iCur=0;
    var attr='';
    var bStop=true;    //假设运动已经该停止了
    
    for(attr in json)
    {
        if(attr=='opacity')
        {
            iCur=parseInt(100*parseFloat(getStyle(obj, 'opacity')));
        }
        else
        {
            iCur=parseInt(getStyle(obj, attr));
        }
        
        if(isNaN(iCur))
        {
            iCur=0;
        }
        
        var iSpeed=(json[attr]-iCur)/8;
        iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
        
        if(parseInt(json[attr])!=iCur)
        {
            bStop=false;
        }
        
        if(attr=='opacity')
        {
            obj.style.filter="alpha(opacity:"+(iCur+iSpeed)+")";
            obj.style.opacity=(iCur+iSpeed)/100;
        }
        else
        {
            obj.style[attr]=iCur+iSpeed+'px';
        }
    }
    
    if(bStop)
    {
        clearInterval(obj.timer);
        obj.timer=null;
        
        if(fnEnd)
        {
            fnEnd();
        }
    }
    
    obj.lastMove=(new Date()).getTime();
}

 

posted @ 2016-03-28 09:46  Shimily  阅读(1252)  评论(0)    收藏  举报