JS 拖动原理
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>拖动层效果</title>
</head> <body>
<div id="tf" style="position:absolute; width:200px; height:150px; background-color:#ccc; top:300px;
left:300px; z-index:101; border:solid 1px blue;"> <div id="title" style="background-color:blue; cursor:move; height:20px; color:#fff; font-size:13px; padding-top: 5px; padding-left:10px;">
拖动层TF...
</div> </div> <script type="text/javascript">
tf=document.getElementById("tf"); //获取得tf对象
var posX; //记录 X
var posY;// 记录 Y
//onmousedown 表示鼠标在按下时发生,记录当前位置
tf.onmousedown=function(e)
{
if(!e)
e=window.event;
posX=e.clientX-parseInt(tf.style.left); //自已本身位
posY=e.clientY-parseInt(tf.style.top);//自已本身位 tf.onmousemove=function(ev)
{
if(ev==null)
ev=window.event;
tf.style.left = (ev.clientX - posX) + "px";
tf.style.top = (ev.clientY - posY) + "px";
}
} tf.onmouseup=function()
{
//onmouseup 事件会在鼠标按键被松开时发生。
tf.onmousemove=null;
}
</script>
</body>
</html>
拖动层效果
JS 拖动原理的更多相关文章
- js拖动层
模仿网易彩票网(http://caipiao.163.com/)的登陆框自己做了一个拖动层,不过有点小问题——在谷歌浏览拖动的时候鼠标状态变成了文字状态(cursor:text;) <!DOCT ...
- js 深入原理讲解系列-Promise
js 深入原理讲解系列-Promise 能看懂这一题你就掌握了 js Promise 的核心原理 不要专业的术语,说人话,讲明白! Q: 输出下面 console.log 的正确的顺序? const ...
- js 深入原理讲解系列-事件循环
js 深入原理讲解系列-事件循环 能看懂这一题你就掌握了 js 事件循环的核心原理 不要专业的术语,说人话,讲明白! Q: 输出下面 console.log 的正确的顺序? console.log(' ...
- js 深入原理讲解系列-currying function
js 深入原理讲解系列-currying function 能看懂这一题你就掌握了 js 科里函数的核心原理 不要专业的术语,说人话,讲明白! Q: 实现 sum 函数使得以下表达式的值正确 cons ...
- Immutable.js 实现原理
Immutable.js 实现原理 Immutable collections for JavaScript v4.0.0-rc.12 released on Oct 31, 2018 https:/ ...
- JS拖动div的原理
要实现移动窗体,首先要捕获三个参数:1.a = 鼠标点击时的坐标.2.b = 被移动窗体的左顶点坐标.3.c = 鼠标移动时的坐标.然后还要算出你鼠标无论点击窗体哪个位置,移动改变的都是 (d = 窗 ...
- require.js工作原理(初始)
详情:请见阮一峰老师的日志:http://www.ruanyifeng.com/blog/2012/11/require_js.html: 导入:<script data-main=" ...
- js 闭包原理理解
问题?什么是js(JavaScript)的闭包原理,有什么作用? 一.定义 官方解释:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 很显然 ...
- 模块化开发之sea.js实现原理总结
seajs官网说:seajs是一个模块加载器,所以学习它并不难. 在我的理解就是:本来我们是需要手动创建 script标签 引入 js文件的,但用seajs后,它就自动帮我们完成这些工作. 这里只说实 ...
随机推荐
- 手机网站调试神器之chrome控制台
现在真是一个信息化的时代,每个人手里都拿着一款智能机,上班下班走路坐车之余都会玩玩手机,上上网.于是作为广大网站媒体来说,争抢手机市场无疑是刻不容缓.对于我们Web前端工程师来说,了解并掌握手机编程的 ...
- 转:不在同一个服务器上的数据库之间的数据操作(oracle/sql server的对比)
如何操做不在同一个数据库中的数据操作: 一.对于SQL server来讲: 1.采用创建链接服务器的方式: (1).创建链接服务器 exec sp_addlinkedserver ...
- Linux环境下GNU, GCC, G++编译器(转)
一,GNU GNU是“GNU 's Not Unix”的递归缩写, Stallman宣布GNU应当发音为Guh-NOO(革奴)以避免与new这个单词混淆(注:Gnu在英文中原意为非洲牛羚,发音与new ...
- Asp.net MVC中Html.Partial, RenderPartial, Action,RenderAction 区别和用法【转发】
Html.partial和RenderPartial的用法与区别Html.partial和RenderPartial都是输出html片段,区别在于Partial是将视图内容直接生成一个字符串并返回(相 ...
- 如何下载flash离线安装包
如何下载flash离线安装包 CreateTime--2018年4月14日16:02:13 Author:Marydon 1.下载地址 UpdateTime--2018年5月13日16点55分 p ...
- 【LeetCode】63. Unique Paths II
Unique Paths II Follow up for "Unique Paths": Now consider if some obstacles are added to ...
- java基础学习总结——GUI编程(二) 未学习
一.事件监听
- 实现简单容器模板类Vec(vector capacity 增长问题、allocator 内存分配器)
首先,vector 在VC 2008 中的实现比较复杂,虽然vector 的声明跟VC6.0 是一致的,如下: C++ Code 1 2 template < class _Ty, cl ...
- JVM虚拟机(四):JVM 垃圾回收机制概念及其算法
垃圾回收概念和其算法 谈到垃圾回收(Garbage Collection)GC,需要先澄清什么是垃圾,类比日常生活中的垃圾,我们会把他们丢入垃圾箱,然后倒掉.GC中的垃圾,特指存于内存中.不会再被使用 ...
- java Arrays对数组操作
Arrays.sort(Array)对数组排序 public static void main(String[] args) throws IOException { int[] a = {1,3,9 ...