功能:
元素跟着鼠标动
代码:
<style type="text/css"> p{ position: absolute; top: 0; left: 0; } </style>
<p>212313</p>
<script>
var startY,endY,startX,endLeft,endTop;
var p=document.getElementsByTagName('p')[0];
p.addEventListener('touchstart',function(e){//开始事件
startX=e.changedTouches[0].clientX;//获取开始的屏幕横坐标
startY=e.changedTouches[0].clientY;//获取开始的屏幕纵坐标
endLeft=parseInt(getComputedStyle(p).left);//获取元素当前的屏幕横坐标
endTop=parseInt(getComputedStyle(p).top);//获取元素当前的屏幕横坐标
})
p.addEventListener('touchmove',function(e){//移动过程
endX=e.changedTouches[0].clientX;//获取结束的屏幕横坐标
endY=e.changedTouches[0].clientY;//获取结束的屏幕纵坐标
p.style.left=endX-startX+endLeft+'px';//给元素left重新赋值,元素一定要定位
p.style.top=endY-startY+endTop+'px';
})
</script>