面向对象的放大镜

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

时间: 2024-08-05 07:03:16

面向对象的放大镜的相关文章

JQ面向对象的放大镜

index.html <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <

javascript面向对象分层思维

js本身不是面向对象语言,在我们实际开发中其实很少用到面向对象思想,以前一直以为当要复用的时候才封装成对象,然而随着现在做的项目都后期测试阶段发现面向对象的作用不仅仅只是复用,可能你们会说面向对象还有继承,多态的概念,但在javascript里面多态的概念是不存在,而继承由于web页面的必须先下载js在运行导致js的继承不能像后台那么灵活而且js没有重载以及重写不方便(而且js中重写的意义不是很大),所以在js中很少用到面向对象,可能在一些插件中会看到对象的写法,写js的都会有同样的感觉在写一个

javascript面向对象思想

js本身不是面向对象语言,在我们实际开发中其实很少用到面向对象思想,以前一直以为当要复用的时候才封装成对象,然而随着现在做的项目都后期测试阶段发现面向对象的作用不仅仅只是复用,可能你们会说面向对象还有继承,多态的概念,但在javascript里面多态的概念是不存在,而继承由于web页面的必须先下载js在运行导致js的继承不能像后台那么灵活而且js没有重载以及重写不方便(而且js中重写的意义不是很大),所以在js中很少用到面向对象,可能在一些插件中会看到对象的写法,写js的都会有同样的感觉在写一个

Js图片放大镜特效源代码下载

Js图片放大镜特效源代码下载,通过面向对象实现 原文:Js图片放大镜特效源代码下载 源代码下载:http://www.zuidaima.com/share/1550463333878784.htm

[.net 面向对象程序设计进阶] (7) Lamda表达式(三) 表达式树高级应用

[.net 面向对象程序设计进阶] (7) Lamda表达式(三) 表达式树高级应用 本节导读:讨论了表达式树的定义和解析之后,我们知道了表达式树就是并非可执行代码,而是将表达式对象化后的数据结构.是时候来引用他解决问题.而本节主要目的就是使用表达式树解决实际问题. 读前必备: 本节学习前,需要掌握以下知识: A.继承 [.net 面向对象编程基础]  (12) 面向对象三大特性——继承 B.多态 [.net 面向对象编程基础]  (13) 面向对象三大特性——多态 C.抽象类 [.net 面向

python学习 面向对象封装

from collectoins import namedtuplePoint=namedtuple('point',['x','y'])t1=Point(1,2)print(t1.x)print(t1.y)没有方法的类属性不会发生变化    定义简单 不能改变面向对象封装私有属性!!!私有方法!!!用装饰器描述的几个方法@property !!!@classmethod!!@staticmethod! 封装:class Teacher:     def __init__(self,name,p

python—面向对象的封装

封装 私有属性 class Teacher: __identifier = 'Teacher' #私有静态属性 def __init__(self,name,pwd) self.name = name self.__pwd = pwd #私有属性 内部使用,外部不能使用 def pwd(self): print(self.__pwd) alex = Teacher('alex','3714') alex.pwd() class Teacher: __identifier = 'Teacher'

python学习_day26_面向对象之封装

1.私有属性 (1)动态属性 在python中用双下划线开头的方式将属性隐藏起来.类中所有双下划线开头的名称,如__x都会自动变形成:_类名__x的形式.这种自动变形的特点是: a.类中定义的__x只能在内部使用,如self.__x,引用的就是变形的结果.b.这种变形其实正是针对外部的变形,在外部是无法通过__x这个名字访问到的.c.在子类定义的__x不会覆盖在父类定义的__x,因为子类中变形成了:_子类名__x,而父类中变形成了:_父类名__x,即双下滑线开头的属性在继承给子类时,子类是无法覆

python面向对象知识点疏理

面向对象技术简介 类: 用来描述具有相同的属性和方法的对象的集合.它定义了该集合中每个对象所共有的属性和方法.对象是类的实例.class 类变量:类变量在整个实例化的对象中是公用的.类变量定义在类中且在函数体之外.类变量通常不作为实例变量使用. 数据成员:类变量或者实例变量用于处理类及其实例对象的相关的数据. 方法重写:如果从父类继承的方法不能满足子类的需求,可以对其进行改写,这个过程叫方法的覆盖,也称为方法的重写. 实例变量:定义在方法中的变量,只作用于当前实例的类. 继承:即一个派生类(de