jquery实现图片放大镜功能

实现原理：

这里用到了两张图片，一张小图，一张大图。将大图设置为放大镜的背景图片，当鼠标在小图上移动时，同时控制背景大图在放大镜中的位置。两张图片大小最好是等比例的，这样才能达到最佳效果。当没有大图时，则默认为小图本身，这时由于两张图片大小一样，因此放大镜效果不明显，就跟没放大是一样的。

此插件用到了html5，css3的一些属性，ie8及以下版本不兼容，放大镜是方形的。

运行效果截图如下：

具体代码如下：

(function () { $。fn。放大镜=函数(选项){ //默认参数设置定义变量设置={ diameter: 150，//放大镜的直径大小borderWidth: 2，//放大镜边框大小borderColor: '白色',//放大镜边框颜色背景Img: './img/111.jpg' //放大镜内的图片（即大图) };//合并参数如果(选项)$。扩展（设置，选项);//链式原则返回this.each(function () { //存储当前对象var root=$(this)；//当前对象宽高var WRoot=root。宽度()；var HRoot=root。高度()；//偏移量左边的和顶部变量偏移量=根。offset()；//放大镜样式var style=' background-position : 0px 0px；背景-重复：不重复；'左侧浮动：style=' position : absolutebox-shadow :0 0 5px # 777，0 0 10px #aaa插图；显示器：无；style=' width : ' String(设置。diameter)' px；高度： ' String(设置。直径)' px；'；style=' border-radius : ' String(设置。直径/2设置。边框宽度)' px；'；style=' border : ' String(设置。边框宽度)“px实心”设置。边框颜色'；'；//创建放大镜定义变量放大镜=$(' div style=' style ' '/div ').appendo(根。parent())；//图片（当没有大图时，为小图本身)var背景img=设置。背景img？设置。背景IMg :根。attr(' src ')；//将图片放入放大镜内放大镜。CSS({背景图像： ' URL('背景img ' ')')})；//缩放比例var WRatio=0；//宽度var HRatio=0；//高度//图片加载完，计算缩放比例//由于图片原本不在数字正射影像图文档里，因此页面加载时不会触发负荷事件，因此要通过执行附录来触发负荷事件$(" img style=" display : none；src='' backgroundImg '' /').load(function () { WRatio=$(this)).width()/WRoot；HRatio=$(这个)。高度()/HRoot；}).appendo(根。parent())；//放大镜及其背景图片位置控制函数位置(e){ var LPOs=parsent(e . pagex-offset。左)；var TPOs=ParSeint(e . Pagey-offset。顶部)；//判断鼠标是否在图片上if(LPos 0 | | TPos 0 | | LPos WRoot | | TPos HRoot){放大镜。hide()；//不在隐藏放大镜} else {放大镜。show()；//反之显示放大镜//控制放大镜内背景图片的位置（设置。直径/2)半径LPos=String((e . pagex-offset。左)* WRatio-设置。直径/2)*(-1))；TPos=String(((例如页面偏移。顶部)* HRatio-设置。直径/2)*(-1))；放大镜。CSS({背景位置： LPOs ' px ' TPOs ' px ' })；//控制放大镜本身位置LPos=字符串(例如page X-设置。直径/2)；TPos=字符串(例如页面设置。直径/2)；放大镜。CSS({左： LPos ' px '，顶： TPos ' px ' })；} } //放大镜放大镜。鼠标移动（位置);//当前对象root.mousemove(位置);});};})();实例演示如下：

！DOCTYPE html头元http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/titleCSS3 jQuery图像放大镜效果/title style type=' text/CSS ' body {底色： Black} .盒子{宽度： 700pxmargin: 50px自动；} /style/headbody div class='box '！-小图-img alt=' id=' img _ 02 ' src=' http :/img/222。gif ' width=' 700 ' height=' 500 '/div脚本src=' http :/Scripts/jquery-1。4 .1 .量滴js ' type=' text/JavaScript '/script script src=' http :/Scripts/jquery。很简单。放大镜。js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(' # img _ 02 ').放大镜();/脚本/正文/html关于jquery实现图片放大镜功能的内容就介绍到这里，希望大家仔细研究，学以致用。