jQuery放大镜插件,demo地址:http://codepen.io/jonechen/pen/mEmJYJ,图片引用的外链,打开的速度可能有点慢;
CSS部分:
*{padding: 0; margin: 0; list-style: none;}
.img{ display: block;position: relative; }
.area{width:50px;height: 100px;background: red;opacity: 0.6;position: absolute;left: 0;top: 0;display: none;}
.box{margin: 50px; }
HTML部分:
<div class="box">
<img src="http://i2.piimg.com/508767/48115abf1b2e9194.jpg" >
</div>
JS插件部分:
(function($) {
var Magnify = function(ele, options) {
this.ele = ele;
this.opt = options;
this.defaults = {
selector: 'img',
boxWidth: 400, // 容器宽度
width: 100, // 放大区域宽度
height: 100, // 放大区域高度
radius: 0, // 放大圆角
backgroundColor: 'red' // 背景色
};
this.setting = $.extend(this.defaults, this.opt);
}
Magnify.prototype = {
init: function() {
var _self = this.ele;
var isMove = false;
_self.css('width', this.setting.boxWidth).addClass(this.setting.selector);
_self.parent().css({
position: "relative",
width: _self.css('width'),
});
var src = _self.attr('src');
$("<div class='area'></div><div class='bigPic'><img src=" + src + "></<div>").appendTo(_self.parent());
var $area = _self.parent().find(".area");
var $bigPic = _self.parent().find(".bigPic");
$area.css({
width: this.setting.width,
height: this.setting.height,
borderRadius: this.setting.radius,
backgroundColor: this.setting.backgroundColor
})
var sw = $area.width(); //剪裁框宽度
var sh = $area.height(); //剪裁框高度
var smallBox_w = _self.parent().width(); //小框的宽度
var smallBox_h = _self.parent().height(); //小框的高度
var pw = $bigPic.find('img').width(); //大图的宽度
var ph = $bigPic.find('img').height(); //大图的高度
var scale = (smallBox_w / pw).toFixed(2);
$bigPic.css({
display: 'none',
position: 'absolute',
width: parseInt(sw / scale),
height: parseInt(sh / scale),
left: '102%',
top: 0,
overflow: 'hidden',
borderRadius: this.setting.radius == 100 ? this.setting.radius + '%' : this.setting.radius
})
$bigPic.find('img').css({
position: 'absolute',
})
_self.parent().on("mouseenter", function() {
$area.show();
isMove = true
})
_self.parent().on("mousemove", function(event) {
if (isMove) {
$bigPic.show();
setPos(event, $(this), scale);
}
})
_self.parent().on("mouseleave", function() {
$bigPic.hide();
$area.hide();
isMove = false
})
},
events: function() {
this.init();
},
}
function setPos(e, obj, scale) {
var x = e.pageX - obj.offset().left,
y = e.pageY - obj.offset().top,
w = obj.find('.area').width(),
h = obj.find('.area').height();
if (x < w / 2) {
x = 0
} else if (x > obj.width() - w / 2) {
x = obj.width() - w
} else {
x -= w / 2
}
if (y < h / 2) {
y = 0
} else if (y > obj.height() - h / 2) {
y = obj.height() - h
} else {
y -= h / 2
}
obj.find('.area').css({
left: x,
top: y
});
obj.find('.bigPic').find('img').css({
left: -x / scale,
top: -y / scale,
})
}
$.fn.Magnifying = function(options) {
var Magnifies = new Magnify(this, options);
return Magnifies.events();
}
})(jQuery);
// 插件调用
$(function() {
$(".box img").Magnifying();
})
默认参数API:
this.defaults = {
selector: 'img',
boxWidth: 400, // 容器宽度
width: 100, // 放大区域宽度
height: 100, // 放大区域高度
radius: 0, // 放大圆角
backgroundColor: 'red' // 背景色
};