JavaScript面向对象分层思维(6)

},
            // 放大镜的图片的top和left
            mover: function (that) {
                if (parseInt(that.pagex2 + that.leftcha) <= parseInt(that._this.width() + that._this.offset().left) && that.pagex2 >= that.leftcha + that._this.offset().left) {
                    $(this).offset({left: that.pagex2 - that.leftcha});
                } else {
                    if (parseInt(that.pagex2 + that.leftcha) > parseInt(that._this.width() + that._this.offset().left) && that.pagex2)
                        $(this).offset({left: that._this.width() + that._this.offset().left - that.leftcha * 2});
                    else
                        $(this).offset({left: that._this.offset().left});
                }
                if (parseInt(that.pagey2 + that.topcha) <= parseInt(that._this.height() + that._this.offset().top) && that.pagey2 >= that.topcha + that._this.offset().top) {
                    $(this).offset({top: (that.pagey2 - that.topcha)});
                    //document.getElementById("move").style.top = (pagey2 - (this.pagey - this.divtop)).toString() + "px";
                } else {
                    if (parseInt(that.pagey2 + that.topcha) > parseInt(that._this.height() + that._this.offset().top))
                        $(this).offset({top: (that._this.height() + that._this.offset().top - that.topcha * 2)});
                    //document.getElementById("move").style.top = (this.height - this.divHeight).toString() + "px";
                    else
                        $(this).offset({top: that._this.offset().top});
                    //document.getElementById("move").style.top = "0px"
                }
                var bilx = ($(this).offset().left - that._this.offset().left) / (that.ImgMinWidth / that.ImgWidth);
                var bily = ($(this).offset().top - that._this.offset().top) / (that.ImgMinHeigth / that.ImgHeight);
                return{left:bilx,top:bily};
            }
        },
        // 第二层 事件绑定层
        domOperation: {
            // 鼠标移动到图片的一系列dom的操作
            imghover: function () {
                var that = this;
                $("img", this._this).hover(function (e) {
                    this.pagex = e.x || e.pageX;
                    this.pagey = e.y || e.pageY;
                    var offset;
                    var obj = new Image();
                    obj.src = that.ImgUrl;
                    obj.onload = function () {
                        if (obj.height > 0) {
                            that.ImgWidth = obj.width;
                            that.ImgHeight = obj.height;
                            if ($("#jqoomz").length == 0) {
                                that._this.after("<div></div>");
                            }
                            offset = that.basicOperation.finder.call(that._this.find("img")[0],that);
                        }
                    };
                    if ($("#jqoomz").length == 0) {
                        that.ImgWidth = obj.width;
                        that.ImgHeight = obj.height;
                        that._this.after("<div></div>");
                    }
                    offset = that.basicOperation.finder.call(this,that);
                    if ($("#jqoomy").length == 0) {
                        $(this).after("<div></div>")
                            .siblings("#jqoomy")
                            .addClass("jqoomy")
                            .show()
                            .width((that.ImgMinWidth / that.ImgWidth * that.ImgMinWidth))
                            .height((that.ImgMinHeigth / that.ImgHeight * that.ImgMinHeigth))
                            .offset({
                                top: offset.top,
                                left: offset.left
                            });
                    }
                    $("#jqoomz").width(that.width).height(that.height).offset({
                        left: that._this.outerWidth() + that._this.offset().left,
                        top: that._this[0].offsetTop
                    }).append($("<img></img>").attr("src", that.ImgUrl));
                },function () {});
            },
            //鼠标在图片上滑动的一系列dom操作
            docMousemove: function () {
                var that=this;
                $(document).on("mousemove", function (event) {
                    that.pagex2 = event.x || event.pageX;
                    that.pagey2 = event.y || event.pageY;
                    var offset=that.basicOperation.mover.call($("#jqoomy"),that);
                    $("#jqoomz img").css({"margin-left": -offset.left, "margin-top": -offset.top});
                });
            },
            //鼠标移除图片的一系列dom操作
            Jqoomhover:function () {
                this._this.hover(function (e) {
                }, function () {
                    console.log(111);
                    $("#jqoomz").remove();
                    $(document).unbind("mousemove");
                    $("#jqoomy").remove();
                });
            }
        }
    };
    $.fn.extend({
        jqoom: function (potions) {
            return new OppJqoom(this, potions);
        }
    })
})(jQuery);

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/104bb57db101f50964c8b28e6a65a52a.html