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";
                    }
                }

  • 相关阅读:
    Mybatis和Spring整合也是能用BatchExecutor的
    与Spring整合的Mybatis没法真正使用BatchExecutor
    Mybatis和Spring整合后sqlsession啥时候关闭的
    Mybatis和Spring的整合原理
    Mybatis是怎么执行一条语句的
    8.11查询结果排序
    8.10、11(select分组和过滤)()
    8.7、8、9(select语句基本用法)(select语句基本运算符)(select聚合查询)
    8.4SQL(DML数据操作语言)-(insert插入数据)(updata更新数据),(delete数据)
    8.2数据库DDL语言(即数据库定义语言)(命名规则以及数据类型)
  • 原文地址:https://www.cnblogs.com/yuejie/p/5982648.html
Copyright © 2011-2022 走看看