前段时间本人在做项目时,做了一个鼠标滚动缩放图片效果,图片支持多个,多个图片循环缩放,花了点时间整理了下,把它贴出来,与大家分享下,在ie6.0,ie7.0,firefox都测试过,没有问题。

<html>

<head>
<title>鼠标滚动图片缩放</title>
<script language="javascript">
      if (window.addEventListener)
      {
         window.addEventListener('DOMMouseScroll', wheel, false);//给firefox添加鼠标滚动事件
      }
      
      function wheel(event)
      {
         return wheelimg(event);
      }
      function bbimg()
      {
         var div = document.getElementById("div1");
         var allImg = div.getElementsByTagName("IMG");
         for(i=0;i<allImg.length;i++)
             {
               var zoom=parseInt(allImg[i].style.zoom, 10)||100;
               zoom+=event.wheelDelta/12;
               if (zoom>0) allImg[i].style.zoom=zoom+'%';
             }
       }
        
       function wheelimg(event)
       {
        var delta = 0;
        var div = document.getElementById("div1");
        if (event.detail)
        {
            //如果是firefox
            var allImg = div.getElementsByTagName("IMG");
            var isThis=false;//现判断鼠标中仑的元素是不是包含在那个div里面
            for(i=0;i<allImg.length;i++)
             {
                   isThis=true;
                   allImg[i].width=allImg[i].width+event.detail*12;
                event.returnValue = false;
             }
             
         }
          return true;
        }
    </script>
</head>
<body  onmousewheel="bbimg()">
    <form >
        <div >
         <img />
         <img />
        </div>
    </form>
</body>
</html>

相关文章:

  • 2022-01-11
  • 2021-05-20
  • 2021-10-06
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-03-08
  • 2022-12-23
  • 2021-10-06
  • 2021-12-03
  • 2021-08-03
  • 2022-01-18
  • 2021-05-15
相关资源
相似解决方案