jQuery放大镜插件

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' // 背景色
};