滾動滑鼠縮放圖片相容所有瀏覽器

antzone發表於2017-03-15
瀏覽器

在很多網站，都有這樣的效果，那就是滾動滑鼠可以縮放圖片的大小，但是很多時候並不能夠相容所有的瀏覽器，一般都是隻支援IE和谷歌，對火狐瀏覽器無能為力，下面就分享一段程式碼例項，能夠相容所有很主流瀏覽器，希望能夠給需要的朋友帶來一定的幫助。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">   
var addEvent=(function(){        
  var _eventCompat=function(event){
    var type=event.type;
    if(type=='DOMMouseScroll'||type=='mousewheel') 
    {
      event.delta=(event.wheelDelta)?event.wheelDelta/120:-(event.detail||0)/3;
    }
    
    if(event.srcElement&&!event.target) 
    {
      event.target=event.srcElement;    
    }
    
    if(!event.preventDefault&&event.returnValue!==undefined) 
    {
      event.preventDefault=function()
      {
        event.returnValue=false;
      };
    }
    return event;
  };
 
  if(window.addEventListener) 
  {
    return function(el, type, fn, capture){
      if(type==="mousewheel"&&document.mozHidden!==undefined) 
      {
        type="DOMMouseScroll";
      }
      el.addEventListener(type,function(ev){
        fn.call(this, _eventCompat(ev));
      },capture||false);
    }
  } 
  else if(window.attachEvent) 
  {
    return function(el, type, fn, capture){
      el.attachEvent("on" + type, function(event){
        event = event || window.event;
        fn.call(el, _eventCompat(event));    
      });
    }
  }
  return function(){};    
})(); 
window.onload=function()
{
  var oImage=document.getElementById("oImage");
  function zoom(event)
  {
    oImage.style.height=(parseInt(oImage.style.height)+event.delta)+"px";
    oImage.style.width=(parseInt(oImage.style.width)+event.delta)+"px";
  }
  addEvent(oImage,"mousewheel",zoom,false);
}
</script>  
</head>  
<body>  
<img id="oImage" style="width:100px;height:100px;" src="mytest/demo/small.jpg"/>  
</body>  
</html>

以上程式碼實現了我們的需要，滾動滾輪能夠縮放圖片，並且能夠相容所有的瀏覽器，這裡就此程式碼就不多介紹了，可以參閱相關閱讀中的內容。

相關閱讀:

1.中鍵滾動可以參閱javascript滑鼠中鍵滾動事件介紹一章節。

2.parseInt()函式可以參閱javascript parseInt()一章節。 

相關文章