javascript实现的拖拽回放
这个功能很简单,直接贴代码啊:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
#btn1 {position:absolute; right:10px; top:10px; width:50px;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拖拽回放</title>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
var oBtn = document.getElementById('btn1');
var arr = []; oDiv.onmousedown = function (ev) {
var oEvent = ev || event; var disX = oEvent.clientX - oDiv.offsetLeft;
var disY = oEvent.clientY - oDiv.offsetTop; document.onmousemove = function (ev) {
var oEvent = ev || event;
var l = oEvent.clientX - disX;
var t = oEvent.clientY - disY; arr.push({x: l, y: t}); oDiv.style.left = l + 'px';
oDiv.style.top = t + 'px';
};
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
};
};
oBtn.onclick = function () {
var timer = setInterval (function () {
if(arr.length > 0) {
var oData = arr.pop();
oDiv.style.left = oData.x + 'px';
oDiv.style.top=oData.y + 'px';
} else {
clearInterval(timer);
}
}, 10);
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="回放" />
<div id="div1">
</div>
</body>
</html>
javascript实现的拖拽回放的更多相关文章
- 每天一个JavaScript实例-html5拖拽
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- day25—JavaScript实现文件拖拽上传案例实践
转行学开发,代码100天——2018-04-10 今天记录一个利用JavaScript实现文件拖拽上传到浏览器,后天将文件打开的小案例. 基本功能:1点击添加文件 2 文件拖拽添加 html: < ...
- Javascript之盒子拖拽(跟随鼠标、边界限定、轨迹回放)
本文通过拖拽案例,实现"跟随鼠标.边界限定.轨迹回放"三大效果: 完整代码中有详尽注释,故不再进行细致讲解: 对于案例中需要注意的重点或易错点问题,会总结在最后. 效果图(仅演示左 ...
- JavaScript动画-模拟拖拽
模拟拖拽的原理: x1等于div.offsetLeft y1等于div.offsetTop x2等于ev.clientX(ev表示event事件) y2等于ev.clientY 当我们在方块上按下鼠标 ...
- JavaScript:鼠标拖拽效果
(之前的那个模板方法模式实在没搞懂...等几天再去研究8) 预览效果: 限制拖动范围在视口内.调整窗口时自动居中... <!DOCTYPE html> <html lang=&quo ...
- JavaScript实现图片拖拽、粘贴上传
前些日子为老婆做了一个web管理商品的工具,因为商品的图片比较多并且还需要剪裁图,为了上传图片方便加了一个拖拽.粘贴上传的功能. 我已经把代码整理出来放到GitHub上了,有兴趣的朋友可以下来玩玩. ...
- dom 拖拽回放
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 超级简单的利用javascript实现文件拖拽事件
1.效果图: 2.源码 <%@ page contentType="text/html;charset=UTF-8" language="java" %& ...
- JavaScript 面向对象的拖拽
一.body <div id="box"></div> 二.css <style> #box { position: abaolute; top ...
随机推荐
- 2014.8.23 Research Meeting Report
Dear All: It was good talk yesterday. However, I want to emphasize that, finally it is the *work* an ...
- RabbitMQ使用注意
1.通常发布者发布结束后会释放Channel,但是消费者由于是异步监听,消费者的Channel不可以释放,否则就断开连接无法监听. 2.当使用默认配置时,ConnectionFactory不指定Por ...
- c# 简易绘制C语言头文件包含关系图
最近在做一个项目的移植工作,项目很大,光c文件大约有1800多.由于某些需要,想要对某些代码文件引用的.h文件进行分析. 网上找了好久,暂无发现类似的工具. 正好,今天放假,就做了这么个工具. 好了, ...
- 【Alpha】第四次Scrum meeting
今天任务一览: 姓名 今日完成任务 所耗时间 刘乾 配置好了所有物理实验的通配模板,为服务器配置了latex中文环境,设置了一些常用字体. Issue链接:https://github.com/bua ...
- 用IDEA开发简单的Servlet
最近学习java,主要是servlet相关的内容.IDEA和servlet之前都没有碰过,所以做了一下小实验,走了一些弯路:这里把一个完整的步骤写出来,加深一下印象. IDEA创建项目步骤 1. 在i ...
- 一个java实现的简单的4则运算器
有些基础知识有欠缺,补一下,顺便练习一下java import com.sun.deploy.util.ArrayUtil; import java.util.*; public class Main ...
- LeetCode-----算法448.找到所有数组中消失的数字
题目: 给定一个范围在 1 ≤ a[i] ≤ n ( n = 数组大小 ) 的 整型数组,数组中的元素一些出现了两次,另一些只出现一次. 找到所有在 [1, n] 范围之间没有出现在数组中的数字. ...
- Visual Studio2013安装过程
Visual Studio是微软开发的一套基于组件的软件开发工具,我选择安装的是Visual Studio2013版本.首先, 第一步是要找到一个安装包: 我们可以直接百度MSDN,显示的第一条就是官 ...
- iOS国际化——通过脚本使storyboard翻译自增
一. 针对两种文件的国际化处理 代码中即.m文件的国际化 首先在你需要进行国际化处理的字符串外面加一层NSLocalizedString,注意中文也是可以的哦 textfield.text = [NS ...
- ubuntu18.04配置nvidia docker和远程连接ssh+远程桌面连接(二)
ubuntu18.04配置nvidia docker和远程连接ssh+远程桌面连接(二) 本教程适用于想要在远程服务器上配置docker图形界面用于深度学习的用户. (二)nvidia docker配 ...