鼠标单击事件、滚轮事件,根据焦点缩放图片

var zoomLargeNum=110;//放大倍数
var zoomSmallNum=90; //缩小倍数
var zoomNum;         //中间变量
//鼠标滚轮滑动缩放图片
function resizeimg(obj){
 var iwidth=1000;
 var iheight=1200;
    var image=new Image();
    image.src=obj.src;
    if(image.width>0 && image.height>0){  //控制初始图片大小
        if(image.width/image.height>= iwidth/iheight){
           if(image.width>iwidth){
               obj.width=iwidth;
               obj.height=(image.height*iwidth)/image.width;
           }else{
                  obj.width=image.width;
                  obj.height=image.height;
                }
        }
        else{
                if(image.height>iheight){
                       obj.height=iheight;
                       obj.width=(image.width*iheight)/image.height;
                }else{
                        obj.width=image.width;
                        obj.height=image.height;
                     }
    }
}
       obj.style.cursor= "pointer";    //改变鼠标指针
      if (navigator.userAgent.toLowerCase().indexOf("ie") > -1) { //判断浏览器,如果是IE
       obj.title = "请使用鼠标滚轮缩放图片";
       obj.onmousewheel = function img_zoom(){ //滚轮缩放
      
           var zoom = parseInt(this.style.zoom, 10) || 100;
           zoom += event.wheelDelta / 12;
           if (zoom> 0){
                        if(zoom>100){
                           MakeZoomPic(obj,"large"); //鼠标滚轮放大图片
                        }else{ 
                           MakeZoomPic(obj,"small"); //鼠标滚轮缩小图片
                        }
                    }
                    return false;
               }
     }else{ //如果不是IE
            obj.title = "点击图片可在新窗口打开";
    }
}
function MakeZoomPic(selPic,zoomType){ //图片缩放事件,以焦点为中心进行缩放.处理鼠标单击、滚轮事件。
  selPic.style.position = "absolute";
  var elm = event.srcElement;
  var iDivHeight = document.body.offsetHeight;   //获得当前ie高度
  var iDivWidth = document.body.offsetWidth;  //获得当前ie宽度
  var iBigImgWidth;  
  var iBigImgHeight;
  var iPosX, iPosY;     //放大图对应显示区域左上角的坐标
  var iMouseX = event.offsetX;    //鼠标对应缩略图左上角的横坐标
  var iMouseY = event.offsetY;    //鼠标对应缩略图左上角的纵坐标
  if(zoomType=="large"){
      zoomNum=zoomLargeNum;
   iBigImgWidth = selPic.clientWidth * zoomNum/100; //放大图宽度,是缩略图的宽度乘以放大倍数
   iBigImgHeight = selPic.clientHeight * zoomNum/100;  //放大图高度,是缩略图的高度乘以放大倍数 
  }else{
      zoomNum=zoomSmallNum;
      iBigImgWidth = selPic.clientWidth * zoomNum/100;          //缩小图宽度,是缩略图的宽度乘以缩小倍数
      iBigImgHeight = selPic.clientHeight * zoomNum/100;        //缩小图高度,是缩略图的高度乘以缩小倍数 
  }
  if (iBigImgWidth <= iDivWidth){
   iPosX = 0;
  }else{
   if ((iMouseX * zoomNum/100) <= (iDivWidth / 2)){
      iPosX = 0;
   }else{
    if (((selPic.clientWidth - iMouseX) * zoomNum/100) <= (iDivWidth / 2)){
      iPosX = -(iBigImgWidth - iDivWidth);
    }else{
      iPosX = -(iMouseX * zoomNum/100 - iDivWidth / 2);
    }
   }
  }
  if (iBigImgHeight <= iDivHeight){
   iPosY = 0;
  }else{
   if ((iMouseY * zoomNum/100) <= (iDivHeight / 2)){
    iPosY = 0;
   }else{
     if (((selPic.clientHeight - iMouseY) * zoomNum/100) <= (iDivHeight / 2)){
       iPosY = -(iBigImgHeight - iDivHeight);
      }else{
       iPosY = -(iMouseY * zoomNum/100 - iDivHeight / 2);
     }
   }
  }
   selPic.style.top = iPosY;
 selPic.style.left = iPosX; 
 selPic.width = iBigImgWidth;
 selPic.height = iBigImgHeight;
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值