澳门新葡萄京娱乐场图片大小随鼠标滚动而改变的兼容IE和Firefox的代码

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

<html>
<head>
    <title>无标题页</title>
    <script language=”javascript”>
      if (window.addEventListener)
      {
         window.addEventListener(‘DOMMouseScroll’, wheel,
false);//给firefox添加鼠标滚动事件
      }
      //else
      //{
        // window.onmousewheel = document.onmousewheel = wheel;//ie
     //}
     
      function wheel(event)
      {
         var delta = 0;
         var div = document.getElementById(“div1”);
         if (!event) /**//* For IE. */
         {
            event = window.event;
         }
        if (event.wheelDelta)
         {
            //让一个是IE
            //if(event.srcElement.tagName==”IMG” &&
div.contains(event.srcElement))
            //{
               //event.srcElement.width+=event.wheelDelta/15;
              // return false;
            //}
         }
         else if (event.detail)
         {
            //如果是firefox
            var allImg = div.getElementsByTagName(“IMG”);
            var
isThis=false;//现判断鼠标中仑的元素是不是包含在那个div里面
            for(i=0;i<allImg.length;i++)
             {
                if(allImg[i]==event.target)
                {
                   isThis=true;
                }
             }
             if(isThis && event.target.tagName==”IMG”)
             {
               
event.target.width=event.target.width+event.detail*12;
                event.returnValue = false;
             }
          }
          return true;
        }
        function bbimg(o)
        {
           var zoom=parseInt(o.style.zoom, 10)||100;
           zoom+=event.wheelDelta/12;
           if (zoom>0) o.style.zoom=zoom+’%’;
           return false;
        }
    </script>
</head>
<body>
    <form id=”form1″ runat=”server”>
    <div>
        <div id=”div1″
        <table class=”tablebody2″ style=”table-layout:fixed;”
border=”0″ width=”90%”>
           <tr>
               <td>
                  <img id=”11″ src=”00.jpg”
onclick=”javascript:window.open(this.src);”
style=”cursor: pointer;”
onload=”javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;”
onmousewheel=”return bbimg(this)” border=”0″ />
               </td>
           </tr>
         </table>
        </div>
    </form>
</body>
</html>

复制代码 代码如下:

<html>
<head>
    <title>无标题页</title>
    <script language=”javascript”>
      if (window.addEventListener)
      {
         window.addEventListener(‘DOMMouseScroll’, wheel,
false);//给firefox添加鼠标滚动事件
      }
      //else
      //{
        // window.onmousewheel = document.onmousewheel = wheel;//ie
      //}
     
      function wheel(event)
      {
         var delta = 0;
         var div = document.getElementById(“div1”);
         if (!event) /**//* For IE. */
         {
            event = window.event;
         }
         if (event.wheelDelta)
         {
            //让一个是IE
            //if(event.srcElement.tagName==”IMG” &&
div.contains(event.srcElement))
            //{
               //event.srcElement.width+=event.wheelDelta/15;
              // return false;
            //}
         }
         else if (event.detail)
         {
            //如果是firefox
            var allImg = div.getElementsByTagName(“IMG”);
            var
isThis=false;//现判断鼠标中仑的元素是不是包含在那个div里面
            for(i=0;i<allImg.length;i++)
             {
                if(allImg[i]==event.target)
                {
                   isThis=true;
                }
             }
             if(isThis && event.target.tagName==”IMG”)
             {
               
event.target.width=event.target.width+event.detail*12;
                event.returnValue = false;
             }
          }
          return true;
        }
        function bbimg(o)
        {
           var zoom=parseInt(o.style.zoom, 10)||100;
           zoom+=event.wheelDelta/12;
           if (zoom>0) o.style.zoom=zoom+’%’;
           return false;
        }
    </script>
</head>
<body>
    <form id=”form1″ runat=”server”>
    <div>
        <div id=”div1″
        <table class=”tablebody2″ style=”table-layout:fixed;”
border=”0″ width=”90%”>
           <tr>
               <td>
                  <img id=”11″ src=”UserFolder/00.jpg”
onclick=”javascript:window.open(this.src);”
style=”cursor: pointer;”
onload=”javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;”
onmousewheel=”return bbimg(this)” border=”0″ />
               </td>
           </tr>
         </table>
        </div>
    </form>
</body>
</html>

<HTML>  
<HEAD>  
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>  
<TITLE>onMouseWheel缩放图片效果-www.jb51.Net</TITLE>
<body>
<script>
function bbimg(o)
{
  var zoom=parseInt(o.style.zoom, 10)||100;
  zoom+=event.wheelDelta/12;
  if (zoom>0) o.style.zoom=zoom+’%’;
}
function addthis()
{
var e=window.event?window.event:e; 
var srcE=e.srcElement?e.srcElement:e.target;
if(!srcE) return;
//author:reterry(dxy) www.jb51.net欢迎转载,转载时请写明出处。
if (String(srcE.tagName).toLowerCase()==’img’){
//alert(‘好’);
bbimg(srcE)
}
}
function backthis(){
var e=window.event?window.event:e; 
var srcE=e.srcElement?e.srcElement:e.target;
if(!srcE) return;
//author:reterry(dxy) www.jb51.net欢迎转载,转载时请写明出处。
if ((String(srcE.tagName).toLowerCase()==’img’)&&(window.event.ctrlKey)){
//alert(‘好’);
srcE.style.zoom=’100%’;
}}
document.onmousewheel=addthis;
document.onmouseout=backthis;
</script>
<A id=ImgSpan href=”” target=_blank><IMG src=”” border=0></A>
<br>鼠标滑轮滚动查看效果,Author:reterry(dxy) www.jb51.net欢迎转载,转载时请写明出处。<br>按住ctrl键然后鼠标从图片上移开,图片可恢复原始大小</body></html>

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

onMouseWheel缩放图片效果-www.jb51.Net

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

澳门新葡萄京娱乐场 1
鼠标滑轮滚动查看效果,Author:reterry(dxy)
www.jb51.net欢迎转载,转载时请写明出处。
按住ctrl键然后鼠标从图片上移开,图片可恢复原始大小

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

代码如下: HTML HEAD
metahttp-equiv=”Content-Type”content=”text/html;charset=gb2312″
TITLEonMouseWheel缩放图片效果-www.jb51.Net/TITLE body script
functionbb…

发表评论

电子邮件地址不会被公开。 必填项已用*标注