搜索到
1
篇与
拖曳
的结果
-
HTML5+CSS3+JavaScript实现拖曳并按照原轨迹返回 HTML5+CSS3+JavaScript实现拖曳并按照原轨迹返回预览{anote icon="" href="https://000081.xyz/html/224.html" type="success" content="点我预览"/}源代码<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>拖曳并按照原轨迹返回</title> <style> .box { width: 100px; height: 100px; border: 1px solid; position: absolute; top: 200px; left: 200px; } </style> </head> <body> <div class="box" id="box"></div> </body> <script type="text/javascript"> // 拖曳对象 var _box = document.getElementById("box"); // 启用对象移动的位置记录 var _bl = false; // 恢复轨迹锁 var his = false; // 对象移动的x轴数组 var x_sz = []; // 对象移动的y轴数组 var y_sz = []; // 拖曳总时长 var timer = ""; // 记录最开始的位置 var start_x = _box.offsetLeft; var start_y = _box.offsetTop; // 对象被点击，实现拖曳 _box.onmousedown = function (e) { // 如果锁启用则点击失效 if (his) { return; } // 开始手动校准位置 _box.style.left = start_x + "px"; _box.style.top = start_y + "px"; // 开启x,y记录 _bl = true; // 记录当前时间戳 timer = new Date().getTime(); // 记录当前点距离对象的左边距距离 var _x = e.offsetX; // 记录当前点距离对象的上边距距离 var _y = e.offsetY; // 拖曳过程函数 onmove = false; document.onmousemove = function (e) { // 如果记录锁被启用 if (_bl) { // 当前位置x var cache_x = e.clientX - _x; // 当前位置y var cache_y = e.clientY - _y; // 数组后追加当前在浏览器当前位置x轴 x_sz.push(cache_x); // 数组后追加当前在浏览器当前位置y轴 y_sz.push(cache_y); //重新设定位置 _box.style.left = cache_x + "px"; _box.style.top = cache_y + "px"; } }; }; // 鼠标弹起，拖曳结束 _box.onmouseup = function () { // 如果锁启用则点击失效 if (his) { return; } // 记录关闭 _bl = false; // 取当前时间戳，并且计算毫秒 timer = new Date().getTime() - timer; // 取数组总个数 var sz_len = x_sz.length - 1; // 计算定时器间隔 var dsq_time = Math.round(timer / sz_len); // 防止定时器叠加，清除定时器 clearInterval(dsq); // 启动恢复锁 his = true; // 恢复轨迹函数 var dsq = setInterval(function () { // 数组遍历完毕 if (sz_len <= 0) { x_sz = []; y_sz = []; // 结束手动校准位置 _box.style.left = start_x + "px"; _box.style.top = start_y + "px"; // 关闭恢复锁 his = false; // 清除定时器 clearInterval(dsq); return; } _box.style.left = x_sz[sz_len] + "px"; _box.style.top = y_sz[sz_len] + "px"; sz_len--; }, dsq_time); }; </script> </html>
