24行代码,让你的网页元素任意放大、缩小、拖拽、移动
来源:互联网 发布:linux shell 函数 编辑:程序博客网 时间:2024/06/07 19:06
原文地址:点击打开链接
前段时间写的,蛮长时间了。个人很喜欢,一段很简单的代码,却能够实现很多功能。到底多简单,先来看代码:
基于jQuery:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(document).mousemove(
function
(e) {
if
(!!
this
.move) {
var
posix = !document.move_target ? {
'x'
: 0,
'y'
: 0} : document.move_target.posix,
callback = document.call_down ||
function
() {
$(
this
.move_target).css({
'top'
: e.pageY - posix.y,
'left'
: e.pageX - posix.x
});
};
callback.call(
this
, e, posix);
}
}).mouseup(
function
(e) {
if
(!!
this
.move) {
var
callback = document.call_up ||
function
(){};
callback.call(
this
, e);
$.extend(
this
, {
'move'
:
false
,
'move_target'
:
null
,
'call_down'
:
false
,
'call_up'
:
false
});
}
});
原理稍后分析,先来看看效果:
简单的拖拽
将代码剥离,只要写5行就可以实现拖拽了,是不是很简单:
1
2
3
4
5
6
$(
'#box'
).mousedown(
function
(e) {
var
offset = $(
this
).offset();
this
.posix = {
'x'
: e.pageX - offset.left,
'y'
: e.pageY - offset.top};
$.extend(document, {
'move'
:
true
,
'move_target'
:
this
});
});
放大、缩小
我们给拖拽增加点功能,支持放大、缩小,先看效果
将代码剥离,原先的代码保留不变,增加一个绑定事件:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var
$box = $(
'#box'
).mousedown(
function
(e) {
var
offset = $(
this
).offset();
this
.posix = {
'x'
: e.pageX - offset.left,
'y'
: e.pageY - offset.top};
$.extend(document, {
'move'
:
true
,
'move_target'
:
this
});
}).on(
'mousedown'
,
'#coor'
,
function
(e) {
var
posix = {
'w'
: $box.width(),
'h'
: $box.height(),
'x'
: e.pageX,
'y'
: e.pageY
};
$.extend(document, {
'move'
:
true
,
'call_down'
:
function
(e) {
$box.css({
'width'
: Math.max(30, e.pageX - posix.x + posix.w),
'height'
: Math.max(30, e.pageY - posix.y + posix.h)
});
}});
return
false
;
});
这样来实现放大、缩小、拖拽是不是很简答,还能实现很多其他效果,大家慢慢领悟。
原理分析:
放大、缩小、拖拽都离不开在网页上拖动鼠标,对于前端来说就是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
1 0
- 24行代码,让你的网页元素任意放大、缩小、拖拽、移动
- 24行代码,让你的网页元素任意放大、缩小、拖拽、移动
- 放大缩小的代码
- bmp 缩放代码(BMP位图任意放大 和缩小)
- cocos2d游戏地图的放大、缩小、移动
- android 图片的 放大 缩小 移动
- 可控制图片放大缩小还原移动效果的JS网页图片查看器
- 网页整体放大/缩小的实现
- 网页中放大、缩小字体的实现
- Android实现网页的放大与缩小
- 网页字体的放大与缩小
- 如何让网页背景图片固定不变 不会随着网页的放大缩小而改变
- 响应式网页让一个div的高和宽保持比例放大缩小
- java对图片任意大小的缩小放大操作
- 相机放大缩小的关键代码:
- IOS代码添加控件,控件移动,放大,缩小,旋转
- IOS代码添加控件,控件移动,放大,缩小,旋转
- IOS代码添加控件,控件移动,放大,缩小,旋转
- iOS 调试问题记录(三)
- 浅谈tcp_nodelay的作用
- 2015-5-13-1
- libpng warning: iCCP: Not recognizing known sRGB profile that has been edited 错误解决
- jquery 的滚动条插件 jquery.nicescroll.js
- 24行代码,让你的网页元素任意放大、缩小、拖拽、移动
- sparkStreaming
- jquery each 跳出循环
- Tomcat指定JAVA_HOME而不用默认环境变量
- C语言选择排序算法及代码
- IDEA常用快捷键
- linux设备驱动程序--类class的实现
- Java基础-值传递与地址传递
- iOS开发之 Realm框架基础知识详解