zoukankan      html  css  js  c++  java
  • 面向对象的放大镜

    //放大镜的面向对象,使用的时候需要获取放大镜的两个盒子,和滤镜还有放大后的图片对象;
    //最后用的时候要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";
                    }
                }

  • 相关阅读:
    三维体系、点、矢量
    在服务中创建用户进程的方法(C#版)
    C++批判(2)
    MFC五大批判
    Windows服务编写原理及探讨(一)
    Lua常用资源连接
    网友怒批“Linux难敌视窗新七大理由”之我见
    在VC++中实现同步Internet时间
    Lua脚本语法说明(修订)
    Lua 5.0 参考手册
  • 原文地址:https://www.cnblogs.com/yuejie/p/5982648.html
Copyright © 2011-2022 走看看