一. 效果图
二. 原理讲解
1. 用到了两张图片，一张小图，一张大图。
2. 小图用于直接在页面上显示，大图则用于放大镜内显示
3. 放大镜实际是一个div，而大图则是这个div的背景图
4. 小图与大图是等比例的，从而达到最佳放大效果
5. 当没设置大图时，则大图为小图本身，此种情况放大效果不明显，相当于没放大一样
6. 这里借助于鼠标移动事件（即：mousemove），通过鼠标在小图上的移动坐标 和 大小图的比例（比例计算得来），从而计算出放大镜内的背景图对应的坐标位置。
三. 插件实现代码
(function () {
$.fn.magnifier = function (options) {
//默认参数设置
var settings = {
diameter: 150, //放大镜的直径大小
backgroundImg: "img/larger.jpg" //放大镜内的图片（即大图）
};
//合并参数
if (options){
$.extend(settings, options);
}
//链式原则
return this.each(function () {
var root = $(this), //存储当前对象
wRoot = root.width(), //当前对象宽
hRoot = root.height(), //当前对象高
offset = root.offset(), //偏移量 left 和 top
magnifier = $(".magnifier"), //放大镜对象
wRatio = 0, //缩放比率－宽度
hRatio = 0, //缩放比率－高度
backgroundImg = settings.backgroundImg ? settings.backgroundImg : root.attr("src"); //大图（当没有大图时，为小图本身）
//设置放大镜样式
magnifier.css({
width : settings.diameter+"px",
height : settings.diameter+"px",
borderRadius : (settings.diameter / 2) + "px",
backgroundImage: "url('" + backgroundImg + "')" }); //将图片放入放大镜内
/* 图片加载完，计算缩放比例
* 由于图片原本不在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),
tPos = parseInt(e.pageY - offset.top);
//判断鼠标是否在图片上
if (lPos < 0 || tPos < 0 || lPos > wRoot || tPos > hRoot) {
magnifier.hide(); //不在隐藏放大镜
} else {
magnifier.show(); //反之显示放大镜
//控制放大镜内背景图片的位置 （settings.diameter / 2）半径
lPos = ((e.pageX - offset.left) * wRatio - settings.diameter / 2) * (-1);
tPos = ((e.pageY - offset.top) * hRatio - settings.diameter / 2) * (-1);
magnifier.css({ backgroundPosition: lPos + 'px ' + tPos + 'px' });
//控制放大镜本身位置
lPos = e.pageX - settings.diameter / 2;
tPos = e.pageY - settings.diameter / 2;
magnifier.css({ left: lPos + 'px', top: tPos + 'px' });
}
}
//放大镜
magnifier.mousemove(_position);
//当前对象
root.mousemove(_position);
});
};
})();
四. Html结构
<div class="box">
<img src="img/small.jpg" id="img-small" width="500" height="333" /> <!-- 小图 -->
<div class="magnifier"></div> <!-- 放大镜div （上一个版本此div是直接定义在js里面的） -->
</div>
五. 放大镜样式
/*放大镜样式*/
.magnifier{
background-position: 0px 0px;
background-repeat: no-repeat;
position: absolute;
box-shadow: 0 0 5px #777, 0 0 10px #aaa inset;
display: none;
width: 150px;
height: 150px;
border-radius: 75px;
border:2px solid #FFF;
cursor: none;
}
之前放大镜及其样式都是写在js代码里面的，为了做到更好的分离，所以此次修改后将放大镜div和css样式抽出来了。
六. 使用示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery放大镜插件</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<h2 class="title">jQuery放大镜插件</h2> <div class="box">
<img src="img/small.jpg" id="img-small" width="500" height="333" /> <!-- 小图 -->
<div class="magnifier"></div> <!-- 放大镜div -->
</div> <script type="text/javascript" src="script/jquery.min.js"></script>
<script type="text/javascript" src="script/jquery.similar.magnifier.js"></script>
<script type="text/javascript">
$("#img-small").magnifier();
</script>
</body>
</html>