鼠标滚轮控制图片大小。
收集一段鼠标滚轮控制图片大小的代码.兼容浏览器
来自：http://blog.csdn.net/muxrwc/archive/2007/08/01/1721227.aspx
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5<title>滚动效果</title>
6
<script type="text/javascript">
7
(function (bool) {
8
//兼容FF一些方法
9 window.FF = bool;
10
11 if (bool) {
12
13 window.attachEvent = document.attachEvent = window.HTMLElement.prototype.attachEvent = function (property, func, bool) {
14 //兼容attachEvent方法
15 return this.addEventListener(property.replace(/^on/, ""), func, bool || false);
16
};
17
18 window.__defineGetter__("event", function () {
19 //兼容Event对象
20 var o = arguments.callee;
21
22 do {
23 if (o.arguments[0] instanceof Event) return o.arguments[0];
24 } while (o = o.caller);
25
26 return null;
27 });
28
29 Event.prototype.__defineGetter__("srcElement", function () {
30 //兼容Event.srcElement对象
31 return this.target;
32 });
33
34 MouseEvent.prototype.__defineGetter__("wheelDelta", function () {
35 //返回鼠标滚轮状态
36 return this.detail * -1;
37 });
38 }
39
40})(/Firefox/.test(window.navigator.userAgent));
41
42var Class = {
43//创建类
44 create : function () {
45 return function () {
46 this.initialize.apply(this, arguments);
47 };
48 }
49};
50
51var $ = function (id) {
52 return "string" == typeof id ? document.getElementById(id) : id;
53};
54
55var wheel = Class.create();
56
57wheel.prototype = {
58//鼠标滚动图片类
59 initialize : function (obj, num) {
60 //初始化参数
61 var wc = this;
62 (wc.img = obj).attachEvent(!window.FF ? "onmousewheel" : "DOMMouseScroll", function () {
63 wc.move(num * (window.event.wheelDelta > 0 ? -1 : 1));
64 });
65
66 wc.item = [
67 [ obj.offsetWidth, "width", "offsetWidth" ], [ obj.offsetHeight, "height", "offsetHeight" ]
68 ].sort(function (a, b) { return b[0] - a[0]; }); //把高和宽从大到小排序
69 },
70
71 move : function (num) {
72 //改变值
73 var wc = this, img = wc.img, a = wc.item;
74
75 //大值除以小值在乘以固定值就是比例缩放
76 img.style[a[0][1]] = Math.max(
77 img[a[0][2]] + Math.round(a[0][0] / a[1][0] * num), a[0][0]
78 ) + "px";
79 //小值不用管
80 img.style[a[1][1]] = Math.max(
81 img[a[1][2]] + num, a[1][0]
82 ) + "px";
83 }
84
85};
86
87window.attachEvent("onload", function () {
88 var wc = new wheel($("div"), 10);
89
90 $("a").onclick = function () {
91 wc.move(50);
92 };
93
94 $("b").onclick = function () {
95 wc.move(-50);
96 };
97
});
98</script>
99</head>
100<body>
101<img id="div" height="60" width="280" src="http://hi.csdn.net/images/csdnlogo.gif" alt="" />
102<br />
103<input id="a" type="button" value="加" /> <input id="b" type="button" value="减" />
104</body>
105</html>
106
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />5
<title>滚动效果</title>6
<script type="text/javascript">
7
(function (bool) {
(8
//兼容FF一些方法9
window.FF = bool;10
11
if (bool) {12
13
window.attachEvent = document.attachEvent = window.HTMLElement.prototype.attachEvent = function (property, func, bool) {14
//兼容attachEvent方法15
return this.addEventListener(property.replace(/^on/, ""), func, bool || false);16
};17
18
window.__defineGetter__("event", function () {19
//兼容Event对象20
var o = arguments.callee; 21
22
do {23
if (o.arguments[0] instanceof Event) return o.arguments[0]; 24
} while (o = o.caller);25
26
return null;27
});28
29
Event.prototype.__defineGetter__("srcElement", function () {30
//兼容Event.srcElement对象31
return this.target;32
});33
34
MouseEvent.prototype.__defineGetter__("wheelDelta", function () {35
//返回鼠标滚轮状态36
return this.detail * -1;37
});38
}39
40
})(/Firefox/.test(window.navigator.userAgent));41
42
var Class = {43
//创建类44
create : function () {45
return function () {46
this.initialize.apply(this, arguments);47
};48
}49
};50
51
var $ = function (id) {52
return "string" == typeof id ? document.getElementById(id) : id;53
};54
55
var wheel = Class.create();56
57
wheel.prototype = {58
//鼠标滚动图片类59
initialize : function (obj, num) {60
//初始化参数61
var wc = this;62
(wc.img = obj).attachEvent(!window.FF ? "onmousewheel" : "DOMMouseScroll", function () {63
wc.move(num * (window.event.wheelDelta > 0 ? -1 : 1));64
});65
66
wc.item = [ 67
[ obj.offsetWidth, "width", "offsetWidth" ], [ obj.offsetHeight, "height", "offsetHeight" ]68
].sort(function (a, b) { return b[0] - a[0]; }); //把高和宽从大到小排序69
},70
71
move : function (num) {72
//改变值73
var wc = this, img = wc.img, a = wc.item;74
75
//大值除以小值在乘以固定值就是比例缩放76
img.style[a[0][1]] = Math.max(77
img[a[0][2]] + Math.round(a[0][0] / a[1][0] * num), a[0][0]78
) + "px";79
//小值不用管80
img.style[a[1][1]] = Math.max(81
img[a[1][2]] + num, a[1][0]82
) + "px";83
}84
85
};86
87
window.attachEvent("onload", function () {88
var wc = new wheel($("div"), 10);89
90
$("a").onclick = function () {91
wc.move(50);92
};93
94
$("b").onclick = function () {95
wc.move(-50);96
};97
});98
</script>99
</head>100
<body>101
<img id="div" height="60" width="280" src="http://hi.csdn.net/images/csdnlogo.gif" alt="" />102
<br />103
<input id="a" type="button" value="加" /> <input id="b" type="button" value="减" />104
</body>105
</html> 106
浙公网安备 33010602011771号