jQuery放大镜插件,demo地址:http://codepen.io/jonechen/pen/mEmJYJ,图片引用的外链,打开的速度可能有点慢;
CSS部分:
*{padding: 0; margin: 0; list-style: none;} .img{ display: block;position: relative; } .area{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, // 容器宽度 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", _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({ 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', 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, // 容器宽度 100, // 放大区域宽度 height: 100, // 放大区域高度 radius: 0, // 放大圆角 backgroundColor: 'red' // 背景色 };