基于jQuery插件jqzoom实现的图片放大镜效果示例

本文实例讲述了基于jQuery插件jqzoom实现的图片放大镜效果。分享给大家供大家参考，具体如下：

jqzoom插件实现图片放大镜效果。

图1.1jqzoom插件实现图片放大镜效果

1、引入jqurty和jqzoom插件

2、应用官方网站给定的样式

.jqzoom{
  border:1px solid #BBB;
  float:left;
  position:relative;
  padding:0px;
  cursor:pointer;
}
div.zoomdiv {
  z-index:  999;
  position : absolute;
  top:0px;
  left:0px;
  width   : 200px;
  height  : 200px;
  background: #ffffff;
  border:1px solid #CCCCCC;
  display:none;
  text-align: center;
  overflow: hidden;
}
div.jqZoomPup {
  z-index  : 999;
  visibility: hidden;
  position : absolute;
  top:0px;
  left:0px;
  width   : 50px;
  height  : 50px;
  border: 1px solid #aaa;
  background: #ffffff url(/images/shopping/zoomlens.gif) 50% top no-repeat;
  opacity: 0.5;
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  filter: alpha(Opacity=50);
}

3、编写HTML代码

其中，在HTML代码中添加该插件自定义的jqimg属性，值为大图的文件路径。

4、查看官方网站的API使用说明，可以写出如下JS代码

$(function() {
  $(".jqzoom").jqueryzoom({
    xzoom: 300, //放大图的宽度(默认是 200)
    yzoom: 300, //放大图的高度(默认是 200)
    offset: 10, //离原图的距离(默认是 10)
    position: "right", //放大图的定位(默认是 "right")
    preload: 1
  });
});

附件

附件1：jQuery.jqzoom.js

/
   var bigwidth = $(".bigimg").get(0).offsetWidth;
   var bigheight = $(".bigimg").get(0).offsetHeight;
   var scaley ='x';
   var scalex= 'y';
   if(isNaN(scalex)|isNaN(scaley)){
   var scalex = (bigwidth/imageWidth);
   var scaley = (bigheight/imageHeight);
   $("div.jqZoomPup").width((settings.xzoom)/scalex );
   $("div.jqZoomPup").height((settings.yzoom)/scaley);
   if(settings.lens){
   $("div.jqZoomPup").css('visibility','visible');
   }
   }
   xpos = mouse.x - $("div.jqZoomPup").width()/2 - imageLeft;
   ypos = mouse.y - $("div.jqZoomPup").height()/2 - imageTop ;
   if(settings.lens){
   xpos = (mouse.x - $("div.jqZoomPup").width()/2 < imageLeft ) ? 0 : (mouse.x + $("div.jqZoomPup").width()/2 > imageWidth + imageLeft ) ? (imageWidth -$("div.jqZoomPup").width() -2) : xpos;
   ypos = (mouse.y - $("div.jqZoomPup").height()/2 < imageTop ) ? 0 : (mouse.y + $("div.jqZoomPup").height()/2 > imageHeight + imageTop ) ? (imageHeight - $("div.jqZoomPup").height() -2 ) : ypos;
   }
   if(settings.lens){
   $("div.jqZoomPup").css({ top: ypos,left: xpos });
   }
   scrolly = ypos;
   $("div.zoomdiv").get(0).scrollTop = scrolly * scaley;
   scrollx = xpos;
   $("div.zoomdiv").get(0).scrollLeft = (scrollx) * scalex ;
   });
      },function(){
 $(this).children("img").attr("alt",noalt);
 $(document.body).unbind("mousemove");
 if(settings.lens){
 $("div.jqZoomPup").remove();
 }
 $("div.zoomdiv").remove();
      });
    count = 0;
    if(settings.preload){
    $('body').append("sdsdssdsd");
    $(this).each(function(){
    var imagetopreload= $(this).children("img").attr("jqimg");
    var content = jQuery('div.jqPreload'+count+'').html();
    jQuery('div.jqPreload'+count+'').html(content+'');
    });
    }
    }
})(jQuery);
function MouseEvent(e) {
   this.x = e.pageX;
   this.y = e.pageY;
}

附件2：放大镜图标（zoomlens.gif）

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。