码迷,mamicode.com
首页 > 其他好文 > 详细

事件拖拽回放事件

时间:2019-03-29 17:41:09      阅读:113      评论:0      收藏:0      [点我收藏+]

标签:null   pos   round   return   text   tle   function   osi   ==   

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#div1{
             width: 100px;
             height: 100px;
             background: blue;
             position: absolute;left: 0px; top: 0px;
		}
		*{
			margin: 0px;
			padding: 0px;
		}
	</style>
</head>
<body>
<div id="div1"></div>
<input type="button" id="btn" name="" value="回放">
   <script type="text/javascript">
   	var arrX=[],arrY=[];
   	div1.onmousedown=function(e){
        var ev=e||event;
        
        var l=ev.clientX-this.offsetLeft;
        var t=ev.clientY-this.offsetTop;
       arrX.push(0);
       arrY.push(0);
   		document.onmousemove=function(e){
   			      var ev=e||event;
   			      var needLeft=ev.clientX-l;
                  var needTop=ev.clientY-t;
                  arrX.push(needLeft);
                  arrY.push(needTop);
                 div1.style.left = needLeft + ‘px‘;
                 div1.style.top =needTop+‘px‘;
   		};
   		document.onmouseup=function(){
   			document.onmousemove=null;
   			document.onmousedowm=null;
  
   		}     
   		  var t=null;
          btn.onclick=function(){
            clearInterval(t) ;
            t=setInterval(function(){
          	 if(arrY.length==0){
          	 	clearInterval(t);
          	 }
          	 div1.style.left= arrX.pop()+‘px‘;
                  div1.style.top=  arrY.pop() +‘px‘;

              },30)
               
          }
   		return false;
   	}

   </script>
</body>
</html>

  

事件拖拽回放事件

标签:null   pos   round   return   text   tle   function   osi   ==   

原文地址:https://www.cnblogs.com/ljyaqd/p/10622533.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!