滚轮改变图片大小

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>

查看全文

相关阅读:
SAP 差旅报销集成方案的实现
 SAP DBDI 网银接口实现案例
 SAP Actual Costing with Material Ledger 激活实际成本后台配置
 技能UP:SAP CO掌上配置手册
 技能UP:SAP OBYC自动记账的实例说明（含value String应用说明）
SAP OBYC自动记账的实例说明 +VALUE STRING
SAP MM/FI 自动过账实现 OBYC 接口执行
 情商UP:不遵守八小时工作制，你就能富起来?？
SAP中方会计凭证打印解决方案
 二维码推广方法20种

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