zoukankan      html  css  js  c++  java
  • 完全兼容的 鼠标滚轴缩放图片

    本文来源:http://www.cnblogs.com/sohighthesky/archive/2010/02/04/1663590.html

    完全兼容(IE6-8,FF,Chrome,Opera,Safari)的鼠标滚轴缩放图片效果:

    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();//阻止默认行为
        }
    };
    zooming.add
    =function(obj,min){//第一个参数指定可以缩放的图片,min指定最小缩放的大小 ,default to 50
        zooming.min=min || 50;
        obj.onmousewheel
    =zooming;
        
    if(/a/[-1]=='a')//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"));
    }

     参考:http://www.cnblogs.com/walkingp/archive/2010/02/03/1662872.html

  • 相关阅读:
    个人总结13
    构建之法阅读笔记一
    个人总结12
    个人总结11
    地铁时光机第一阶段冲刺十
    地铁时光机第一阶段冲刺九
    地铁时光机第一阶段冲刺八
    单词 统计续
    地铁时光机第一阶段冲刺七
    个人总结10
  • 原文地址:https://www.cnblogs.com/weekend001/p/1663780.html
Copyright © 2011-2022 走看看