完全兼容的 鼠标滚轴缩放图片

以前看到的都是用IE的zoom，所以非IE就不支持，昨天看到这个js中鼠标滚轮事件详解 ，于是完全兼容（IE6-8,FF,Chrome,Opera,Safari）的鼠标滚轴缩放图片效果今天就诞生了

 

默认最小缩放为原图片的50%

新窗口查看效果 

 

code如下： 

 

/* !
 *Author:sohighthesky
 *blog:http://www.cnblogs.com/sohighthesky
 *date:2010-2-4
  */
var  zooming = function (e){
    e = window.event  || e;
     var  o = this ,data = e.wheelDelta  ||  -e.detail * 40 ,zoom,size;
     if ( !+ ' \v1 ' ){ // IE
        zoom  =  parseInt(o.style.zoom)  ||   100 ; 
        zoom  +=  data  /   12 ;
         if (zoom  >  zooming.min) 
            o.style.zoom  =  zoom  +   ' % ' ;
        e.returnValue = false ;
    } else  {
        size = o.getAttribute( " _zoomsize " ).split( " , " );
        zoom = parseInt(o.getAttribute( " _zoom " ))  || 100 ;
        zoom += data / 12;
         if (zoom > zooming.min){
            o.setAttribute( " _zoom " ,zoom);
            o.style.width = size[ 0 ] * zoom / 100+"px";
            o.style.height = size[ 1 ] * zoom / 100+"px"
        }

        e.preventDefault();//阻止默认行为

        e.stopPropagation();//for Firefox3.6
    }
};
zooming.add = function (obj,min){ // 第一个参数指定可以缩放的图片，min指定最小缩放的大小 ,default to 50
    zooming.min = min  ||   50 ;
    obj.onmousewheel = zooming;
     if ( /Firefox/.test(navigator.userAgent) ) // if Firefox
        obj.addEventListener( " DOMMouseScroll " ,zooming, false );
     if ( - [ 1 ,]){ // if not IE
        obj.setAttribute( " _zoomsize " ,obj.offsetWidth + " , " + obj.offsetHeight);
    }
};

window.onload = function (){ // 放在onload中，否则非ie中会无法计算图片大小出错
    zooming.add(document.getElementById( " testimg1 " ));
}

 

 

 

转载于:https://www.cnblogs.com/sohighthesky/archive/2010/02/04/mousezooming.html