javascript 实现 原路返回
css代码
<style type="text/css">
* {
margin: 0px;
padding: 0px;
font-family: "micsoft yahei","微软雅黑";
font-size: 15px;
}
div{
width: 50px;
height: 50px;
background: #f00;
border-radius:5px ;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor: pointer;
position: absolute;
top: 60px;
left: 30px;
}
input{
position: absolute;
top: 10px;
left: 10px;
padding: 3px;
cursor: pointer;
}
</style>
html代码
<body> <input type="button" value="原路返回"/> <div></div> </body>
javascript代码
<script type="text/javascript">
//1、以鼠标在div上点击触发为开始
//2、点击鼠标移动时触发鼠标移动事件 向数组内注入数据（移动的坐标）
//3、以鼠标从div上移开为结束
//4、点击“原路返回”按钮遍历数组（移动的坐标） 定时触发数组内的坐标移动div 达到”返回“的功能
window.onload=function(){
var oDiv=document.getElementsByTagName("div")[0];
var oBtn=document.getElementsByTagName("input")[0];
var time=null,arrTop=[],arrLeft=[];
oDiv.onmousedown=function(ev){
var event=ev || window.event;
//获取鼠标在div内的坐标
var disX=event.clientX-oDiv.offsetLeft;
var disY=event.clientY-oDiv.offsetTop;
arrTop=[60];
arrLeft=[30];
document.onmousemove=function(ev){
var event=ev || window.event;
//获取拖拽后鼠标的位置
var l=event.clientX;
var t=event.clientY;
//把拖拽后的位置存进数组里面，用拖拽后鼠标的位置减去鼠标在物体上的位置，就是拖拽后物体的位置
arrLeft.push(l-disX);
arrTop.push(t-disY);
oDiv.style.left=l-disX +"px";
oDiv.style.top=t-disY +"px";
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
};
return false;
}
//原路返回的核心就是把移动时的坐标记录下来，然后进行数组重排，并设定定时器把数组内的搞宽赋值给物体。
oBtn.onclick=function(){
arrTop.reverse();//重排
arrLeft.reverse();//重排
var i=0;
oBtn.time=setInterval(function(){
oDiv.style.top=arrTop[i]+"px";
oDiv.style.left=arrLeft[i]+"px";
i++;
if(i==arrTop.length){
clearInterval(oBtn.time);
arrTop=[];
arrLeft=[];
}
},20);
}
}
</script>
-
本文向大家介绍vue路甶实现原理？相关面试题，主要包含被问及vue路甶实现原理？时的应答技巧和注意事项，需要的朋友参考一下 以官方仓库下examples/basic基础例子来一点点具体分析整个流程。 和流程相关的主要需要关注点的就是components、history目录以及create一matcher.js、 create一route一map.js、index.js，install.js。 从入
-
本文向大家介绍原生JavaScript实现AJAX、JSONP，包括了原生JavaScript实现AJAX、JSONP的使用技巧和注意事项，需要的朋友参考一下 相信大多数前端开发者在需要与后端进行数据交互时，为了方便快捷，都会选择JQuery中封装的AJAX方法，但是有些时候，我们只需要JQuery的AJAX请求方法，而其他的功能用到的很少，这显然是没必要的。 其实，原生JavaScript实现A
-
简单例子 const Koa = require('koa') const app = new Koa() app.use( async ( ctx ) => { let url = ctx.request.url ctx.body = url }) app.listen(3000) 访问 http://localhost:3000/hello/world 页面会输出 /hello/wor
-
本文向大家介绍原生JavaScript实现todolist功能，包括了原生JavaScript实现todolist功能的使用技巧和注意事项，需要的朋友参考一下 该项目主要可以练习js操控dom，事件，事件触发之间的逻辑关系，以及如何写入缓存，获取缓存。 主要功能： 将用户输入添加至待办项 可以对todolist进行分类，用户勾选即将待办项分入已完成组 todolist的每一项可删除和编辑 将用户输
-
本文向大家介绍Android实现返回键操作思路，包括了Android实现返回键操作思路的使用技巧和注意事项，需要的朋友参考一下 记录用户点击的操作历史，使用栈数据结构，频繁的操作栈顶（添加，获取，删除），使用LinkedList 捕获用户的返回键操作，响应返回键，返回上一个界面 MainActivity.java MiddleManager.java 以上就是本文的全部内容，希望对大家的学习有所帮
-
本文向大家介绍原生JavaScript实现幻灯片效果，包括了原生JavaScript实现幻灯片效果的使用技巧和注意事项，需要的朋友参考一下 当我们制作一个页面时，尤其是制作一个首页时，通常会设计一个可以链接到整个网站的其他主体页面的导航栏，或者一段网站的介绍文字中会包含这页面的跳转，通常情况会使用title属性为这些跳转链接添加一些解释性的文字，但是我们可以通过制作一个幻灯片的demo，加强用户的