首页 JavaScript源码正文

js拖拽回放功能

景先 源码 2015-03-23 790 0 json数组拖拽
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js拖拽回放功能- www.xianstudy.com</title>
<style>
div { width:100px; height:100px; background:red; position:absolute; top:0; right:0; }
</style>
<script>
window.onload=function (){
    var oDiv=document.getElementById('div1');
    var timer=null;
    
    var arr=[];
    
    oDiv.onmousedown=function (ev){
        var oEvent=ev || event;
        var disX=oEvent.clientX-oDiv.offsetLeft;
        var disY=oEvent.clientY-oDiv.offsetTop;
        
        document.onmousemove=function (ev){
            var oEvent=ev || event;
            var top=oEvent.clientY-disY;
            var left=oEvent.clientX-disX;
            
            var json={
                'left':left,
                'top' : top
            };
            
            arr.push(json);
            
            oDiv.style.left=left+'px';
            oDiv.style.top=top+'px';
        };
        
        document.onmouseup=function (){
            document.onmousemove=document.onmouseup=null;
            console.log(arr);
        };
        
        
        return false;
    };
    
    var oBtn=document.getElementById('btn');
    oBtn.onclick=function (){
        clearInterval(timer);
        timer=setInterval(function (){
            // alert(JSON.stringify());
            var json=arr.pop();
            if (arr.length == 0)
            {
                clearInterval(timer);
            }
            oDiv.style.left=json.left+'px';
            oDiv.style.top=json.top+'px';
        }, 30);
    };
};
</script>
</head>

<body>
    <input type="button" value="回放" id="btn" />
    <div id="div1"></div>
</body>
</html>

知识点解析:

  1. 鼠标点击时获取相关距离disX,disY

  2. 鼠标移动时记录top,left,并将其放在json里,并将此json数据添加在创建的数组里面arr.push(json);

  3. 再点击回放按钮时定义一个定时器每个30毫秒将json里的值读取一次并且重新赋予oDiv,var json = arr.pop();


版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论