js鼠标滚轮缩放图片（兼容ie、chrome、firefox）-自学php网

js鼠标滚轮缩放图片（兼容ie、chrome、firefox）

来源：自学PHP网时间：2023-03-10 09:19 作者：阅读:次

[导读] 在js中我们要实现鼠标滚轮缩放图片最简单的办法就是直接使用onmousewheel就可以了，但这种效果并不兼容所有浏览器了，下面我来给大家介绍兼容IE6-8,FF,Chrome,Opera,Safari鼠标滚轮缩放图片...

我使用最简单的就直接使用onmousewheel命令了

代码如下复制代码

<script language="JavaScript">
<!--
//改变图片大小
function resizepic(thispic){
 if(thispic.width>700) thispic.width=700;
}
//无级缩放图片大小
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>
<img src="/images/zhanghanyun.jpg" width="320" height="240" border="0" onload="javascript:resizepic(this)" onmousewheel="return bbimg(this)">

例1

IE6-8,FF,Chrome,Opera,Safari都可使用哦。

代码如下复制代码

var zooming=function(e){
    e=window.event ||e;
    var o=this,data=e.wheelDelta || e.detail*40,zoom,size;
    if(!+'v1'){
        zoom = parseInt(o.style.zoom) || 100;
        zoom += data / 12;
        if(zoom > zooming.min)
        o.style.zoom = zoom + '%';
    } 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";
        }
    }
};
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.getElementByIdx_x("testimg1"));
}

例2

代码如下复制代码

<html>
<script type="text/javascript">
function resizeimg(ImgD,iwidth,iheight) {
         var image=new Image();
         image.src=ImgD.src;
         if(image.width>0 && image.height>0){
            if(image.width/image.height>= iwidth/iheight){
               if(image.width>iwidth){
                   ImgD.width=iwidth;
                   ImgD.height=(image.height*iwidth)/image.width;
               }else{
                      ImgD.width=image.width;
                      ImgD.height=image.height;
                    }
                   ImgD.alt=image.width+"&times;"+image.height;
            }
            else{
                    if(image.height>iheight){
                           ImgD.height=iheight;
                           ImgD.width=(image.width*iheight)/image.height;
                    }else{
                            ImgD.width=image.width;
                            ImgD.height=image.height;
                         }
                    ImgD.alt=image.width+"&times;"+image.height;
                }
　　　        ImgD.style.cursor= "pointer"; //改变鼠标指针
　　        if (navigator.userAgent.toLowerCase().indexOf("ie") > -1) { //判断浏览器，如果是IE
　　　　        ImgD.title = "请使用鼠标滚轮缩放图片";
　　　　        ImgD.onmousewheel = function img_zoom() //滚轮缩放
　　　         {
　　　　　　　　        var zoom = parseInt(this.style.zoom, 10) || 100;
　　　　　　　　        zoom += event.wheelDelta / 12;
　　　　　　　　        if (zoom> 0)　this.style.zoom = zoom + "%";
　　　　　　　　        return false;
　　　         }
　          }
        }
 }
</script>
<body>
示例：
   <img alt="" src="部门ID对照表.jpg" onload="resizeimg(this,this.width,this.height);" /> 
</body>
</html>

JavaScript中鼠标滚轮事件实现代码

js验证email，电话，手机号码正则

子栏目

js鼠标滚轮缩放图片（兼容ie、chrome、firefox）

最新评论

添加评论

更多文章推荐

添加评论