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 = $(“