【JS】基于javascript实现对图片的随意拖拽,放大缩小
最近写项目的过程中需要对图片进行一个操作，点击之后弹出图片，在可定div范围内对图片进行任意拖拽位置和鼠标滚动时对其放大缩小，双击图片恢复原图！对于我们这样后台程序员而言，这种前台效果实现起来确实有点勉强，在经过半个小时挣扎之后，终于完成效果，发表上来，以供广大后台程序员借鉴吧！
第一步：
body之内的代码如下：
|
1
2
3
4
5
6
7
8
9
|
<
body
>
<
div
id
=
'block1'
style
=
'height: 0; left: 0px; position: absolute; top: 0px; width: 0;'
class
=
"dragAble"
>
<
img
src
=
"images/1.png"
id
=
"images1"
onmousewheel
=
"return bbimg(this)"
ondblclick
=
"realsize();"
style
=
"top:0px;left:0px;position:relative;"
width
=
"140px"
height
=
"40px"
>
</
div
>
</
body
>
|
第二步：
鼠标自由拖拽图片自由移动代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
/*鼠标将图片在相应的div自由拖动*/
drag = 0;
move = 0;
var
ie = document.all;
var
nn6 = document.getElementById && !document.all;
var
isdrag =
false
;
var
y,x;
var
oDragObj;
var
pic_width,pic_height,pic_zoom;
var
divleft,divtop;
function
moveMouse(e) {
if
(isdrag) {
oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y) +
"px"
;
oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x) +
"px"
;
return
false
;
}
}
function
initDrag(e) {
var
oDragHandle = nn6 ? e.target : event.srcElement;
var
topElement =
"HTML"
;
while
(oDragHandle.tagName != topElement && oDragHandle.className !=
"dragAble"
) {
oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
}
if
(oDragHandle.className ==
"dragAble"
) {
isdrag =
true
;
oDragObj = oDragHandle;
nTY = parseInt(oDragObj.style.top + 0);
y = nn6 ? e.clientY : event.clientY;
nTX = parseInt(oDragObj.style.left + 0);
x = nn6 ? e.clientX : event.clientX;
document.onmousemove = moveMouse;
return
false
;
}
}
document.onmousedown = initDrag;
document.onmouseup =
new
Function(
"isdrag=false"
);
|
第三步：
鼠标滚动放大缩小代码
这里需要强调的是火狐浏览器不支持wheel事件，所以需要对其注册wheel事件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
$(document).ready(
function
() {
if
(window.addEventListener){
window.addEventListener(
'DOMMouseScroll'
, wheel,
false
);
//给firefox添加鼠标滚动事件，因为火狐没有wheel事件
}
});
function
wheel(event) {
if
(!event)
/**/
/* For IE. */
{
event = window.event;
}
else
if
(event.detail)
{
var
height1 = $(
"#images1"
).attr(
"height"
);
if
(!height1) {
height1 = height1.substring(0, height1.length - 2);
}
var
width1 = $(
"#images1"
).attr(
"width"
);
if
(!width1) {
width1 = width1.substring(0, width1.length - 2);
}
if
(event.detail < 0) {
var
temp1 = parseInt(height1) * 1.2;
var
temp2 = parseInt(width1) * 1.2;
}
else
{
var
temp1 = parseInt(height1) / 1.2;
var
temp2 = parseInt(width1) / 1.2;
}
$(
"#images1"
).attr(
"height"
, temp1 +
"px"
);
$(
"#images1"
).attr(
"width"
, temp2 +
"px"
);
}
}
/*非Firefox的主流浏览器*/
function
bbimg(o) {
var
zoom = parseInt(o.style.zoom, 10) || 100;
zoom += event.wheelDelta / 12;
if
(zoom > 0) o.style.zoom = zoom +
'%'
;
return
false
;
}
|
第四步：
双击图片恢复到原图
|
1
2
3
4
5
6
7
8
|
function
realsize() {
$(
"#images1"
).attr(
"height"
,
"40px"
);
$(
"#images1"
).attr(
"width"
,
"140px;"
);
$(
"#images1"
).css(
"zoom"
,
"100%"
);
$(
"#block1"
).css(
"left"
,
"0px"
);
$(
"#block1"
).css(
"top"
,
"0px"
);
}
|
第五步:
需要引入
|
1
|
<script src=
"jQuery/jquery-1.6.2.js"
></script>
|
第六步：
实例图片长为140px;宽为40px;各位同学自己引入的图片记得修改height，width。
另外，我这些数据都是写死的，因为是案例，而实际项目中这些数据可能都是你从后台传过来的
需要我们用$来取，包括我们的图片路径也是，这样才能保证我们点击每张图片的效果都是不一样的。
总结：
广大后台程序员也需要大大掌握前台交互技术，从今天开始努力学习！
源码下载位置：【javascript】基于javascript实现对图片的随意拖拽,放大缩小
扫一扫
1754
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
