24行代码,让你的网页元素任意放大、缩小、拖拽、移动
2016-05-13 09:59
447 查看
原文地址:点击打开链接
前段时间写的,蛮长时间了。个人很喜欢,一段很简单的代码,却能够实现很多功能。到底多简单,先来看代码:
基于jQuery:
原理稍后分析,先来看看效果:
将代码剥离,只要写5行就可以实现拖拽了,是不是很简单:
将代码剥离,原先的代码保留不变,增加一个绑定事件:
这样来实现放大、缩小、拖拽是不是很简答,还能实现很多其他效果,大家慢慢领悟。
放大、缩小、拖拽都离不开在网页上拖动鼠标,对于前端来说就是document的mousemove,当鼠标在网页上移动的时候,无时无刻不在触发mousemove事件,当鼠标触发事件时,什么时候需要执行我们特定的操作,这就是我们要做的了。我在mousemove中增加了几个对象来判定是否进行操作:
move:是否执行触发操作
move_target:操作的元素对象
move_target.posix:操作对象的坐标
call_down:mousemove的时候的回调函数,传回来的this指向document
call_up:当鼠标弹起的时候执行的回调函数,传回来的this指向document
小提示:
简单的操作,只需要设定move_target对象,设置move_target的时候不要忘记了move_target.posix哦;
复杂的操作可以通过call_down、call_up进行回调操作,这个时候是可以不用设置move_target对象的
拖拽和放大、缩小实现了,但是有个问题,当我们鼠标点击并滑动的时候,是会选中文本的,为了避免这个问题,大家可以参考这篇文章
网页的放大、缩小、拖拽事件就研究到这里了,如果你还有什么疑问,欢迎留言哦~~
最后,有什么问题,大家可以给我留言哦,别忘了关注我的博客哦:
http://list.qq.com/cgi-bin/qf_invite?id=b6eb34388fd016582957d6e50d005146e24fe6b166ee66c0
前段时间写的,蛮长时间了。个人很喜欢,一段很简单的代码,却能够实现很多功能。到底多简单,先来看代码:
基于jQuery:
简单的拖拽
将代码剥离,只要写5行就可以实现拖拽了,是不是很简单:放大、缩小
我们给拖拽增加点功能,支持放大、缩小,先看效果将代码剥离,原先的代码保留不变,增加一个绑定事件:
原理分析:
放大、缩小、拖拽都离不开在网页上拖动鼠标,对于前端来说就是document的mousemove,当鼠标在网页上移动的时候,无时无刻不在触发mousemove事件,当鼠标触发事件时,什么时候需要执行我们特定的操作,这就是我们要做的了。我在mousemove中增加了几个对象来判定是否进行操作:move:是否执行触发操作
move_target:操作的元素对象
move_target.posix:操作对象的坐标
call_down:mousemove的时候的回调函数,传回来的this指向document
call_up:当鼠标弹起的时候执行的回调函数,传回来的this指向document
小提示:
简单的操作,只需要设定move_target对象,设置move_target的时候不要忘记了move_target.posix哦;
复杂的操作可以通过call_down、call_up进行回调操作,这个时候是可以不用设置move_target对象的
深入研究
拖拽和放大、缩小实现了,但是有个问题,当我们鼠标点击并滑动的时候,是会选中文本的,为了避免这个问题,大家可以参考这篇文章
难道你以为仅仅这样就可以阻止firefox选中文本了嘛
网页的放大、缩小、拖拽事件就研究到这里了,如果你还有什么疑问,欢迎留言哦~~最后,有什么问题,大家可以给我留言哦,别忘了关注我的博客哦:
http://list.qq.com/cgi-bin/qf_invite?id=b6eb34388fd016582957d6e50d005146e24fe6b166ee66c0
相关文章推荐
- C语言选择排序算法及代码
- Windows上Python3.5安装Scrapy(lxml) 以及与twisted有关错误的解决
- PHP语言 -- 新建流程
- PHP 返回13位时间戳的实现代码
- Java定时调度 Timer类和TimerTask类
- c# Bitmap byte[]互转
- googleNet
- PHP正则表达式教程(基础篇)
- C# Base64编码解码
- C++中的引用(&)
- php环境配置以及笔记
- Python新建/删除文件夹
- 关于spring 防sql注入,转义反转义,入参检查
- c#编程指南(四) 组元(Tuple)
- C语言fgets读取整个文本文件的内容
- Spring-Mybatis分页--PageHelper
- 【JDK】:ConcurrentHashMap高并发机制——【转载】
- java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener
- PMD logoJava代码检查工具 PMD
- php设计模式