图片大小随鼠标滚动而改变的兼容IE和firefox的代码

搞了半天,终于搞定,但是在firefox下面显示效果不是很好,代码如下:(后面附上注明几点)

 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
78

在上面的代码里,我首先把判断IE捕捉IE鼠标滚动事件的代码去掉了,因为如果不去掉效果和去掉以后直接写
onmousewheel="return bbimg(this)"的运行效果要相差很远;
还有一点就是方了个table,加上了style="table-layout:fixed;属性,如果不用table用div我找不到任何样式来控制当这个图片月滚越大的时候会把所有的页面样式都搞坏;

页面图片效果可以在 一诺操盘手网预览!

转载于:https://www.cnblogs.com/pwqzc/archive/2007/07/14/818302.html