jquery实现图片放大镜功能

实现原理：
这里用到了两张图片，一张小图，一张大图。将大图设置为放大镜的背景图片，当鼠标在小图上移动时，同时控制背景大图在放大镜中的位置。两张图片大小最好是等比例的，这样才能达到最佳效果。当没有大图时，则默认为小图本身，这时由于两张图片大小一样，因此放大镜效果不明显，就跟没放大是一样的。
此插件用到了html5，css3的一些属性，ie8及以下版本不兼容，放大镜是方形的。
运行效果截图如下：

具体代码如下：

（function （） { $.fn.Magnifier = function （options） {//默认参数设置var settings = { diameter: 150, //放大镜的直径大小 borderWidth: 2, //放大镜边框大小 borderColor: "white", //放大镜边框颜色 backgroundImg: "../img/111.jpg" //放大镜内的图片（即大图）};//合并参数if （options） $.extend（settings, options）;//链式原则return this.each（function （） { //存储当前对象 var root = $（this）; //当前对象宽高 var WRoot = root.width（）; var HRoot = root.height（）; //偏移量 left 和 top var offset = root.offset（）; //放大镜样式 var style = "background-position: 0px 0px;background-repeat: no-repeat;float: left;"; style += "position: absolute;box-shadow:0 0 5px #777, 0 0 10px #aaa inset;display: none;"; style += "width: " + String（settings.diameter） + "px;height: " + String（settings.diameter） + "px;"; style += "border-radius: " + String（settings.diameter / 2 + settings.borderWidth） + "px;"; style += "border: " + String（settings.borderWidth） + "px solid " + settings.borderColor + ";"; //创建放大镜 var magnifier = $（"<div style="" + style + ""></div>"）.appendTo（root.parent（））; //图片（当没有大图时，为小图本身） var backgroundImg = settings.backgroundImg ? settings.backgroundImg : root.attr（"src"）; //将图片放入放大镜内 magnifier.css（{ backgroundImage: "url（"" + backgroundImg + ""）" }）; //缩放比例 var WRatio = 0; //宽度 var HRatio = 0; //高度 //图片加载完，计算缩放比例 //由于图片原本不在DOM文档里，因此页面加载时不会触发load事件，因此要通过执行appendTo来触发load事件 $（"<img style="display:none;" src="" + backgroundImg + "" />"）.load（function （） {WRatio = $（this）.width（） / WRoot;HRatio = $（this）.height（） / HRoot; }）.appendTo（root.parent（））; //放大镜及其背景图片位置控制 function Position（e） {var LPos = parseInt（e.pageX - offset.left）;var TPos = parseInt（e.pageY - offset.top）;//判断鼠标是否在图片上if （LPos < 0 || TPos < 0 || LPos > WRoot || TPos > HRoot） { magnifier.hide（）; //不在隐藏放大镜} else { magnifier.show（）; //反之显示放大镜 //控制放大镜内背景图片的位置 （settings.diameter / 2）半径 LPos = String（（（e.pageX - offset.left） * WRatio - settings.diameter / 2） * （-1））; TPos = String（（（e.pageY - offset.top） * HRatio - settings.diameter / 2） * （-1））; magnifier.css（{ backgroundPosition: LPos + "px " + TPos + "px" }）; //控制放大镜本身位置 LPos = String（e.pageX - settings.diameter / 2）; TPos = String（e.pageY - settings.diameter / 2）; magnifier.css（{ left: LPos + "px", top: TPos + "px" }）;} } //放大镜 magnifier.mousemove（Position）; //当前对象 root.mousemove（Position）;}）; };}）（）;

实例DEMO如下：

<！DOCTYPE html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3+jQuery图像放大镜效果</title> <style type="text/css">body{ background-color: Black;}.box{ width: 700px; margin: 50px auto;} </style></head><body> <div class="box">     <！--小图--><img alt="" id="img_02" src="../img/222.gif" width="700" height="500" /> </div> <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="../Scripts/jquery.similar.magnifier.js" type="text/javascript"></script> <script type="text/javascript">$（"#img_02"）.Magnifier（）; </script></body></html>

关于jquery实现图片放大镜功能的内容就介绍到这里，希望大家仔细研究，学以致用。