面向对象的放大镜

Posted 2020-08-15

//放大镜的面向对象,使用的时候需要获取放大镜的两个盒子,和滤镜还有放大后的图片对象;
//最后用的时候要new 出mirror,然后传参进去;先获取:
//            var leftBox = $("#leftBox");//获取小图的盒子
//            var rightBox = $("#rightBox");//获取大图的盒子
//            var drag = $("#drag");//获取滤镜
// var bigImg = $(".bigImg")[0];//获取大图大图和小图的比例是小图和滤镜的比例                                                                                                                                                                                                                                                                                                                 //           
//var newMirror = new mirror($(".smallBox")[0],$(".bigBox")[0],$(".drag")[0],$(".bigImg")[0])
function mirror(leftBox,rightBox,drag,bigImg){
                this.leftBox = leftBox;
                this.rightBox = rightBox;
                this.drag = drag;
                this.bigImg = bigImg;
                this.count();
                this.move();
            }
            mirror.prototype.count = function(){
                this.leftBoxWid = this.leftBox.offsetWidth;
                this.leftBoxHei = this.leftBox.offsetHeight;
                this.leftBoxLeft = this.leftBox.offsetLeft;
                this.leftBoxTop = this.leftBox.offsetTop;
                this.dragWid = parseInt(oGet.getStyle(this.drag,"width"));
                this.dragHei = parseInt(oGet.getStyle(this.drag,"height"));
                this.maxWid = this.leftBoxWid - this.dragWid;
                this.maxHei = this.leftBoxHei - this.dragHei;
            }
            mirror.prototype.move = function(){
                var that = this;
                this.leftBox.onmouseover = function(){
                    that.drag.style.display = "block";
                    that.rightBox.style.display = "block";
                }
                this.leftBox.onmouseout = function(){
                    that.drag.style.display = "";
                    that.rightBox.style.display = "";
                }
                document.onmousemove = function(e){
                    var e = e||window.event;
                    var scrollT = document.documentElement.scrollTop||document.body.scrollTop;
                    var disX = e.clientX - that.leftBoxLeft - that.dragWid/2;
                    var disY = e.clientY - that.leftBoxTop - that.dragHei/2 + scrollT;
                    if(disX<=0){
                        disX = 0;
                    }else if(disX>=that.maxWid){
                        disX = that.maxWid;
                    }
                    if(disY<=0){
                        disY = 0;
                    }else if(disY>=that.maxHei){
                        disY = that.maxHei;
                    }
                    that.drag.style.left = disX + "px";
                    that.drag.style.top = disY + "px";
                    that.bigImg.style.left = -2*disX + "px";
                    that.bigImg.style.top = -2*disY + "px";
                }
            }