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


    以前看到的都是用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"));
    }
  • 相关阅读:
    php filter 安全过滤函数
    python常用快捷键
    【python】详解time模块功能asctime、localtime、mktime、sleep、strptime、strftime、time等函数以及时间的加减运算
    linux VIM基本命令
    vim常用命令总结 (转)
    sklearn中的交叉验证(Cross-Validation)
    scikit-learn 0.18中的cross_validation模块被移除
    python logging模块
    随机森林参数理解与调优
    kaggle 欺诈信用卡预测——Smote+LR
  • 原文地址:https://www.cnblogs.com/sohighthesky/p/mousezooming.html
Copyright © 2020-2023  润新知