鼠标拖动事件_js效果(深入分析)
来源:互联网 发布:a为n阶矩阵 AAt=E 编辑:程序博客网 时间:2024/05/16 07:42
鼠标拖动事件_js效果(深入分析)
from http://hi.baidu.com/xuemeiweb/blog/item/3c692f66150021cc80cb4afb.html
鼠标拖动是很常见的js效果,例如我们装扮自己的博客、空间时常用到拖动某一个版块到任意位置;淘宝网上对要购买的衣服有放大镜效果(鼠标拖动效果是其中的一部分)拖动放大镜时需要用到鼠标拖动效果;有时候我们打开某一个图片时会拖动到图片查看器打开,这时也需要鼠标拖动效果;鼠标拖动一个窗口时,也会用到鼠标拖动效果。这里说的鼠标拖动是在网页上操作的鼠标拖动效果。鼠标拖动的实现方式有很多种,这里会对各种思路做一个分析和比较,并对其中我认为比较好的思路进行详细解析。思路一:鼠标在页面上移动时不断获取鼠标位置,并将鼠标的位置信息赋值给随鼠标移动的标签,对标签进行定位;这样鼠标就能进行拖动标签了。这种鼠标拖动方式常见于淘宝上的放大镜效果。这里用到一种方法即:怎样获取鼠标所在的位置。这需要用到event事件,其中FF不支持window.event事件但支持传参chrome两种方式均支持不用管,所以需要兼容IE/FF的写法是:
明白了怎样获取鼠标的位置,只需要将鼠标的位置信息赋值给鼠标要拖动的标签为之定位即可,完整的js代码是:
其中获取鼠标位置可以用返回鼠标位置来做即在函数move中加入另一个函数来返回鼠标位置并用传递参数的方法来传递,当然这里并没有必要这样做,而且这样做在这里也并不节省代码,这里只是多提供一种方法而已。下面是用返回值的方法的js代码:思路二:其实算是另一种鼠标拖动,即当鼠标按下时获取某一个标签,鼠标按下并移动时标签随鼠标移动,当松开鼠标时解除标签移动事件。初时我的思路是鼠标的三个事件鼠标按下、鼠标移动、鼠标松开。但是当完成后在各个浏览器下测试时发现在FF下非常卡,就像电脑被卡住了一样。js代码如下:
经老师分析这种方法确实可用但是因为有兼容性差异用户体验不好,推荐了另一种方法即:只需用鼠标的两个事件。当鼠标按下时不断获取鼠标的位置并赋值给标签,即加入一个定时器控制每10毫秒执行一次此函数就不会有卡屏的现象,当鼠标松开时解除定时器。但是我们仔细分析就知道这样做是非常消耗电脑内存的。那我们有什么好的方法来执行这样的一个鼠标事件呢?
思路三:其实是对思路一和思路二的补充理解,即当鼠标按下时触发鼠标移动要执行的函数,当鼠标松开时解除对函数的绑定。这样就能达到思路二中描述的鼠标拖动事件,而又不会不断的消耗大量的内存。这只是一种思路js代码就以后再附上。
完结:以上是我对鼠标拖动事件做的一些比较练习,如果有错误的地方希望能够得到大家的指正。
PS:各种位置坐标:http://www.docin.com/p-219840634.html
- 鼠标拖动事件_js效果(深入分析)
- 鼠标拖动事件_js效果(深入分析)
- jquery 鼠标拖动效果
- 鼠标拖动效果
- JQ鼠标拖动效果
- Silverlight事件之鼠标拖动(二)
- 简单的鼠标拖动效果
- wxpython实现鼠标拖动事件
- 前端鼠标拖动事件冲突
- 捕捉鼠标拖动和鼠标移动事件
- FullCalendar-日志事件拖动效果
- 韩顺平 javascript教学视频_学习笔记23_js事件驱动机制深入理解_js常用事件_js版计算器
- 鼠标可拖动的浮动层效果
- JS做的鼠标拖动翻页效果
- Silverlight不响应鼠标实现拖动效果
- VC - MFC鼠标拖动效果编程
- js 实现 鼠标拖动DIV 效果
- 鼠标实现物体拖动带拖尾的效果
- UML的认识
- Flex:Web报表引擎——MyReport 2.6.1.0新功能
- C语言研究性学习的路线(1)
- irqs.h mini2440的中断号预定义文件IRQ(0)
- XML的学习与收获
- 鼠标拖动事件_js效果(深入分析)
- Linux kernel移植流程
- 第四周第一天
- XML第一课
- C语言研究性学习的路线(3)
- 梦想之谈
- 初学XML
- xml入门
- CCNA读书笔记