jquery实现图片放大镜功能

2015-11-24 09:55作者：fang

实现原理：

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

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

运行效果截图如下：

jquery实现图片放大镜功能

具体代码如下：

(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>

<title>CSS3+jQuery图像放大镜效果</title>

body

{

background-color: Black;

}

.box

{

width: 700px;

margin: 50px auto;

}

</style>

</head>

<body>

</div>

$("#img_02").Magnifier();

</script>

</body>

</html>

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