鼠标放在图片上滑动鼠标滑轮缩放图片放大缩小CSS特效，当鼠标处于网页图片之上时滚动鼠标滚轮缩放图片DIV+CSS+JS特效。

鼠标滑轮缩放图片特效效果截图

一、最简单的简洁版图片缩放特效如下：   -   TOP

1、缩放JS代码：

<script language="javascript"> 
<!-- 
    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> 

2、HTML中图片：

<img src="divcss5-logo-201305.gif" alt="鼠标放上滑动鼠标滑动放大缩小此图片"
 title="鼠标放上滑动鼠标滑动放大缩小此图片" onmousewheel="return bbimg(this)"
 width="165" height="60" style="cursor: pointer;" border="0" /> 

使用说明：需要缩放放大缩小图片的地方加入“onmousewheel="return bbimg(this)"”即可。使用时候最好对图片img标签内设置宽度和高度。

此特效特点，只对鼠标所在上方对应图片进行缩放放大缩小。

简单版在线演示：查看案例

打包下载：

二、复杂版缩放图片JS特效 不推荐   -   TOP

此款DIV CSS+JS的图片缩放特效，应用不是那么好使用，推荐最简洁版，复杂版缩放图片代码如下。

1、JS代码：

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

2、HTML代码如下：

<body onmousewheel="bbimg()"> 
        <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> 
</body> 

使用说明：需要对body标签内加入“onmousewheel="bbimg()"”；同时需要缩放的图片放入“<div id="div1"> ”内，同时对图片设置“ID=wheelimg”，注意ID参数变化。

在线演示：查看案例

打包下载：

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css-texiao/texiao572.shtml