搞了半天,终于搞定,但是在firefox下面显示效果不是很好,代码如下:(后面附上注明几点)
在上面的代码里,我首先把判断IE捕捉IE鼠标滚动事件的代码去掉了,因为如果不去掉效果和去掉以后直接写
onmousewheel="return bbimg(this)"的运行效果要相差很远;
还有一点就是方了个table,加上了style="table-layout:fixed;属性,如果不用table用div我找不到任何样式来控制当这个图片月滚越大的时候会把所有的页面样式都搞坏;
页面图片效果可以在一诺操盘手网预览!
1
<html>
2
<head>
3
<title>无标题页</title>
4
<script language="javascript">
5
if (window.addEventListener)
6
{
7
window.addEventListener('DOMMouseScroll', wheel, false);//给firefox添加鼠标滚动事件
8
}
9
//else
10
//{
11
// window.onmousewheel = document.onmousewheel = wheel;//ie
12
//}
13
14
function wheel(event)
15
{
16
var delta = 0;
17
var div = document.getElementById("div1");
18
if (!event) /* For IE. */
19
{
20
event = window.event;
21
}
22
if (event.wheelDelta)
23
{
24
//让一个是IE
25
//if(event.srcElement.tagName=="IMG" && div.contains(event.srcElement))
26
//{
27
//event.srcElement.width+=event.wheelDelta/15;
28
// return false;
29
//}
30
}
31
else if (event.detail)
32
{
33
//如果是firefox
34
var allImg = div.getElementsByTagName("IMG");
35
var isThis=false;//现判断鼠标中仑的元素是不是包含在那个div里面
36
for(i=0;i<allImg.length;i++)
37
{
38
if(allImg[i]==event.target)
39
{
40
isThis=true;
41
}
42
}
43
if(isThis && event.target.tagName=="IMG")
44
{
45
event.target.width=event.target.width+event.detail*12;
46
event.returnValue = false;
47
}
48
}
49
return true;
50
}
51
function bbimg(o)
52
{
53
var zoom=parseInt(o.style.zoom, 10)||100;
54
zoom+=event.wheelDelta/12;
55
if (zoom>0) o.style.zoom=zoom+'%';
56
return false;
57
}
58
</script>
59
</head>
60
<body>
61
<form id="form1" runat="server">
62
<div>
63
<div id="div1"
64
<table class="tablebody2" style="table-layout:fixed;" border="0" width="90%">
65
<tr>
66
<td>
67
<img id="11" src="UserFolder/00.jpg" onclick="javascript:window.open(this.src);"
68
style="cursor: pointer;" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;"
69
onmousewheel="return bbimg(this)" border="0" />
70
</td>
71
</tr>
72
</table>
73
</div>
74
</form>
75
</body>
76
</html>
77![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
78![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
22
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
23
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
24
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
25
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
26
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
27
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
28
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
29
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
30
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
31
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
32
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
33
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
34
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
35
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
36
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
37
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
38
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
39
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
40
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
41
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
42
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
43
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
44
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
45
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
46
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
47
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
48
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
49
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
50
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
51
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
52
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
53
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
54
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
55
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
56
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
57
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
58
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
59
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
60
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
61
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
62
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
63
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
64
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
65
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
66
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
67
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
68
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
69
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
70
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
71
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
72
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
73
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
74
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
75
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
76
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
77
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
78
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
在上面的代码里,我首先把判断IE捕捉IE鼠标滚动事件的代码去掉了,因为如果不去掉效果和去掉以后直接写
onmousewheel="return bbimg(this)"的运行效果要相差很远;
还有一点就是方了个table,加上了style="table-layout:fixed;属性,如果不用table用div我找不到任何样式来控制当这个图片月滚越大的时候会把所有的页面样式都搞坏;
页面图片效果可以在一诺操盘手网预览!