滚轮改变图片大小

zoukankan html css js c++ java

滚轮改变图片大小

<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>

查看全文

相关阅读:
Spring4
Mysql索引优化、JMM内存模型
 深入浅出JVM
ZGC垃圾搜集器
 Hibernate4基础
 红楼梦各版本及资料
 JavaME环境配置
 5.1 Intent
4.3 异步任务
 4.2.2 网络编程之Socket

原文地址：https://www.cnblogs.com/ymyglhb/p/1324063.html