鼠标滚动缩放图片效果

前段时间本人在做项目时，做了一个鼠标滚动缩放图片效果，图片支持多个，多个图片循环缩放，花了点时间整理了下，把它贴出来，与大家分享下，在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 id="form1" runat="server">
        <div id="div1">
         <img id="wheelimg" src="http://farm3.static.flickr.com/2782/4098845549_fe43958798.jpg" style="cursor: pointer;" border="0" />
       <img id="wheelimg1" src="http://farm3.static.flickr.com/2448/4099603568_69b7811d55.jpg" style="cursor: pointer;" border="0" />
        </div>
    </form>
</body>
</html>

鼠标滚动缩放图片效果相关推荐

【Axure视频教程】鼠标滚动缩放图片
今天教大家制作鼠标滚动缩小放大图片的原型模板,包括向下滚动放大.向上滚动缩小.拖动图片移动到指定位置的效果.该教程从材料准备到完成交互,手把手的教学. [视频教程--试看版] [Axure视频教程]鼠 ...
网页鼠标滚动实现图片缩放
<SCRIPT LANGUAGE="JavaScript"> <!-- //图片按比例缩放,可输入参数设定初始大小 function resizeimg(ImgD ...
鼠标滚动调整图片大小（css3 zoom 放大缩小）
文章目录 zoom 作用说明语法案例解释 onmousewheel 鼠标滚动,图片缩放鼠标滚动事件 zoom 作用说明设置或检索对象的缩放比例. normal: 使用对象的实际尺寸. <n ...
【Axure视频教程】鼠标滚动切换图片
今天教大家如何制作鼠标上下滚动切换上一张或下一张图片的原型模板,制作完成后,下次使用时也很方便,只需要复制粘贴,导入对应图片即可.该教程从材料准备到完成交互,手把手的教学. [视频教程--试看版] [ ...
Python OpenCV：利用鼠标移动缩放图片
一.实现目标在OpenCV中通过鼠标左键拖拽移动图片,通过鼠标滚轮前后旋转放大缩小图片. 二.实现背景在前一篇博客在OpenCV中使用滚动条显示大图中发现自己画滚动条移动大图略显繁琐,且缩 ...
Vue 实现鼠标滚轮缩放图片并拖动
需求:实现鼠标滚轮上滚下滚缩放图片,单击不松开拖动图片给图片添加一个盒子 // dom <div @mousewheel.prevent="rollImg" class=& ...
python调整屏幕缩放比例_python实现批量按比例缩放图片效果
本文实例为大家分享了python实现批量按比例缩放图片的具体代码,供大家参考,具体内容如下把脚本文件放在要缩放的文件夹下面. 双击运行脚本,输入要缩放的系数.脚本会在当前目录下创建一个scaledI ...
百度地图api点击事件及鼠标滚动缩放
首先找百度拿到密钥http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey不解释, 把ip和密钥设置好干货在此: <!DOC ...
杠杠做的全屏随鼠标滚动显示图片，类似于PPT效果
图片有22张,是一张张加载的,耐心点,鼠标一直尝试向下滚就行了. 图片来自<天空之境:乌尤尼盐沼>,一个好美好美的地方引个流,欢迎去我的博客看看:http://blog.cxycs.co ...

鼠标滚动缩放图片效果

鼠标滚动缩放图片效果相关推荐

最新文章

热门文章