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

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

图1.1jqzoom插件实现图片放大镜效果
1、引入jqurty和jqzoom插件

<script src="/js/common/jquery-1.6.2.js" type="text/javascript"></script><script src="/js/common/jquery.jqzoom.js" type="text/javascript"></script>

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

/*jQzoom*/.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代码

<div class="jqzoom"><img src="/images/shopping/pro_img/blue_one_small.jpg" style="width:300px; height:300px;" alt="" jqimg="/images/shopping/pro_img/blue_one_big.jpg" id="bigImg"/></div>

其中，在HTML代码中添加该插件自定义的jqimg属性，值为大图的文件路径。
4、查看官方网站的API使用说明，可以写出如下JS代码

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

附件
附件1：jQuery.jqzoom.js

//**************************************************************// jQZoom allows you to realize a small magnifier window,close// to the image or images on your web page easily.//// jqZoom version 2.2// Author Doc. Ing. Renzi Marco（www.mind-projects.it）// First Release on Dec 05 2007// i"m looking for a job,pick me up！！！// mail: renzi.mrc@gmail.com//**************************************************************（function（$）{$.fn.jqueryzoom = function（options）{var settings = {xzoom: 200, //zoomed width default widthyzoom: 200, //zoomed div default widthoffset: 10, //zoomed div default offsetposition: "right" ,//zoomed div default position,offset position is to the right of the imagelens:1, //zooming lens over the image,by default is 1;preload: 1};if（options） {$.extend（settings, options）;}var noalt="";$（this）.hover（function（）{var imageLeft = $（this）.offset（）.left;var imageTop = $（this）.offset（）.top;var imageWidth = $（this）.children（"img"）.get（0）.offsetWidth;var imageHeight = $（this）.children（"img"）.get（0）.offsetHeight;noalt= $（this）.children（"img"）.attr（"alt"）;var bigimage = $（this）.children（"img"）.attr（"jqimg"）;$（this）.children（"img"）.attr（"alt",""）;if（$（"div.zoomdiv"）.get（）.length == 0）{$（this）.after（"<div class="zoomdiv"><img class="bigimg" src=""+bigimage+""/></div>"）;$（this）.append（"<div class="jqZoomPup"> </div>"）;}if（settings.position == "right"）{if（imageLeft + imageWidth + settings.offset + settings.xzoom > screen.width）{leftpos = imageLeft - settings.offset - settings.xzoom;}else{leftpos = imageLeft + imageWidth + settings.offset;}}else{leftpos = imageLeft - settings.xzoom - settings.offset;if（leftpos < 0）{leftpos = imageLeft + imageWidth + settings.offset;}}$（"div.zoomdiv"）.css（{ top: imageTop,left: leftpos }）;$（"div.zoomdiv"）.width（settings.xzoom）;$（"div.zoomdiv"）.height（settings.yzoom）;$（"div.zoomdiv"）.show（）;if（！settings.lens）{ $（this）.css（"cursor","crosshair"）;}$（document.body）.mousemove（function（e）{mouse = new MouseEvent（e）;/*$（"div.jqZoomPup"）.hide（）;*/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（"<div style="display:none;" class="jqPreload"+count+"">sdsdssdsd</div>"）;$（this）.each（function（）{var imagetopreload= $（this）.children（"img"）.attr（"jqimg"）;var content = jQuery（"div.jqPreload"+count+""）.html（）;jQuery（"div.jqPreload"+count+""）.html（content+"<img src=""+imagetopreload+"">"）;}）;}}}）（jQuery）;function MouseEvent（e） { this.x = e.pageX; this.y = e.pageY;}

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

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jQuery表格（table）操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。