當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript 移动元素并使其原路返回
生活随笔
收集整理的這篇文章主要介紹了
JavaScript 移动元素并使其原路返回
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
JavaScript 移動元素并使其原路返回
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.box {height: 200px;width: 200px;position: absolute;background-color: red;}</style> </head><body><div class="box"><button>原路返回</button></div><script>var box = document.getElementsByClassName("box")[0];var btn = box.children[0];var posArr = [];btn.onclick = function () {var len = posArr.length - 1;var id = setInterval(function () {box.style.left = posArr[len].x + "px"box.style.top = posArr[len].y + "px"len--;if(len < 0){clearInterval(id);posArr = [];}}, 20)}btn.onmousedown = function(e){e.stopPropagation();}box.onmousedown = function (e) {var x = e.offsetX; // 相對當前元素的距離var y = e.offsetY;posArr.push({ x: 8, y: 8 });box.onmousemove = function (e) {box.style.left = e.clientX - x + "px"box.style.top = e.clientY - y + "px"posArr.push({ x: e.clientX - x, y: e.clientY - y });}}box.onmouseup = function () {console.log(posArr);box.onmousemove = null;}</script> </body></html>總結
以上是生活随笔為你收集整理的JavaScript 移动元素并使其原路返回的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 简单作文模板
- 下一篇： JavaScript 实现简单的移动和缓