收集一段鼠标滚轮控制图片大小的代码.兼容浏览器
来自: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![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
<
script
type
="text/javascript"
>
7![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
(function (bool)
{
8
//兼容FF一些方法
9
window.FF = bool;
10
11![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (bool)
{
12
13![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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![](/Images/OutliningIndicators/InBlock.gif)
18![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
window.__defineGetter__("event", function ()
{
19
//兼容Event对象
20
var o = arguments.callee;
21
22![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
do
{
23
if (o.arguments[0] instanceof Event) return o.arguments[0];
24
} while (o = o.caller);
25
26
return null;
27
});
28
29![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
Event.prototype.__defineGetter__("srcElement", function ()
{
30
//兼容Event.srcElement对象
31
return this.target;
32
});
33
34![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
MouseEvent.prototype.__defineGetter__("wheelDelta", function ()
{
35
//返回鼠标滚轮状态
36
return this.detail * -1;
37
});
38
}
39
40
})(/Firefox/.test(window.navigator.userAgent));
41![](/Images/OutliningIndicators/InBlock.gif)
42![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var Class =
{
43
//创建类
44![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
create : function ()
{
45![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
return function ()
{
46
this.initialize.apply(this, arguments);
47
};
48
}
49
};
50![](/Images/OutliningIndicators/InBlock.gif)
51![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var $ = function (id)
{
52
return "string" == typeof id ? document.getElementById(id) : id;
53
};
54![](/Images/OutliningIndicators/InBlock.gif)
55
var wheel = Class.create();
56![](/Images/OutliningIndicators/InBlock.gif)
57![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
wheel.prototype =
{
58
//鼠标滚动图片类
59![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
initialize : function (obj, num)
{
60
//初始化参数
61
var wc = this;
62![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
(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![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
].sort(function (a, b)
{ return b[0] - a[0]; }); //把高和宽从大到小排序
69
},
70
71![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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![](/Images/OutliningIndicators/InBlock.gif)
87![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
window.attachEvent("onload", function ()
{
88
var wc = new wheel($("div"), 10);
89
90![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
$("a").onclick = function ()
{
91
wc.move(50);
92
};
93
94![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
$("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
![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/None.gif)
4
![](/Images/OutliningIndicators/None.gif)
5
![](/Images/OutliningIndicators/None.gif)
6
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
7
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
8
![](/Images/OutliningIndicators/InBlock.gif)
9
![](/Images/OutliningIndicators/InBlock.gif)
10
![](/Images/OutliningIndicators/InBlock.gif)
11
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
12
![](/Images/OutliningIndicators/InBlock.gif)
13
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
14
![](/Images/OutliningIndicators/InBlock.gif)
15
![](/Images/OutliningIndicators/InBlock.gif)
16
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
17
![](/Images/OutliningIndicators/InBlock.gif)
18
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
19
![](/Images/OutliningIndicators/InBlock.gif)
20
![](/Images/OutliningIndicators/InBlock.gif)
21
![](/Images/OutliningIndicators/InBlock.gif)
22
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
23
![](/Images/OutliningIndicators/InBlock.gif)
24
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
25
![](/Images/OutliningIndicators/InBlock.gif)
26
![](/Images/OutliningIndicators/InBlock.gif)
27
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
28
![](/Images/OutliningIndicators/InBlock.gif)
29
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
30
![](/Images/OutliningIndicators/InBlock.gif)
31
![](/Images/OutliningIndicators/InBlock.gif)
32
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
33
![](/Images/OutliningIndicators/InBlock.gif)
34
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
35
![](/Images/OutliningIndicators/InBlock.gif)
36
![](/Images/OutliningIndicators/InBlock.gif)
37
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
38
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
39
![](/Images/OutliningIndicators/InBlock.gif)
40
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
41
![](/Images/OutliningIndicators/InBlock.gif)
42
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
43
![](/Images/OutliningIndicators/InBlock.gif)
44
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
45
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
46
![](/Images/OutliningIndicators/InBlock.gif)
47
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
48
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
49
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
50
![](/Images/OutliningIndicators/InBlock.gif)
51
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
52
![](/Images/OutliningIndicators/InBlock.gif)
53
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
54
![](/Images/OutliningIndicators/InBlock.gif)
55
![](/Images/OutliningIndicators/InBlock.gif)
56
![](/Images/OutliningIndicators/InBlock.gif)
57
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
58
![](/Images/OutliningIndicators/InBlock.gif)
59
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
60
![](/Images/OutliningIndicators/InBlock.gif)
61
![](/Images/OutliningIndicators/InBlock.gif)
62
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
63
![](/Images/OutliningIndicators/InBlock.gif)
64
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
65
![](/Images/OutliningIndicators/InBlock.gif)
66
![](/Images/OutliningIndicators/InBlock.gif)
67
![](/Images/OutliningIndicators/InBlock.gif)
68
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
69
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
70
![](/Images/OutliningIndicators/InBlock.gif)
71
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
72
![](/Images/OutliningIndicators/InBlock.gif)
73
![](/Images/OutliningIndicators/InBlock.gif)
74
![](/Images/OutliningIndicators/InBlock.gif)
75
![](/Images/OutliningIndicators/InBlock.gif)
76
![](/Images/OutliningIndicators/InBlock.gif)
77
![](/Images/OutliningIndicators/InBlock.gif)
78
![](/Images/OutliningIndicators/InBlock.gif)
79
![](/Images/OutliningIndicators/InBlock.gif)
80
![](/Images/OutliningIndicators/InBlock.gif)
81
![](/Images/OutliningIndicators/InBlock.gif)
82
![](/Images/OutliningIndicators/InBlock.gif)
83
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
84
![](/Images/OutliningIndicators/InBlock.gif)
85
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
86
![](/Images/OutliningIndicators/InBlock.gif)
87
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
88
![](/Images/OutliningIndicators/InBlock.gif)
89
![](/Images/OutliningIndicators/InBlock.gif)
90
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
91
![](/Images/OutliningIndicators/InBlock.gif)
92
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
93
![](/Images/OutliningIndicators/InBlock.gif)
94
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
95
![](/Images/OutliningIndicators/InBlock.gif)
96
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
97
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
98
![](/Images/OutliningIndicators/None.gif)
99
![](/Images/OutliningIndicators/None.gif)
100
![](/Images/OutliningIndicators/None.gif)
101
![](/Images/OutliningIndicators/None.gif)
102
![](/Images/OutliningIndicators/None.gif)
103
![](/Images/OutliningIndicators/None.gif)
104
![](/Images/OutliningIndicators/None.gif)
105
![](/Images/OutliningIndicators/None.gif)
106
![](/Images/OutliningIndicators/None.gif)