javascript面向对象系列第五篇
<style>
.test{height: 50px;width: 50px;background-color: pink;position:absolute;}
#test2{left:60px;background-color: lightblue;}
</style>
</head>
<body>
<div id="test1" class="test"></div>
<div id="test2" class="test"></div>
<script>
function Drag(obj){
this.obj= obj;
}
Drag.prototype.init = function(){
var that = this;
this.obj.onmousedown = function(e){
e = e || event;
that.fnDown(e);
document.onmousemove = function(e){
e = e || event;
that.fnMove(e);
}
document.onmouseup = function(){
that.fnUp();
}
return false;
}
};
Drag.prototype.fnDown = function(e){
this.disX = e.clientX - this.obj.offsetLeft;
this.disY = e.clientY - this.obj.offsetTop;
}
Drag.prototype.fnMove = function(e){
this.obj.style.left = e.clientX - this.disX + 'px';
this.obj.style.top = e.clientY - this.disY + 'px';
}
Drag.prototype.fnUp = function(){
document.onmousemove = document.onmouseup = null;
}
function ChildDrag(obj){
Drag.call(this,obj);
}
if(!Object.create){
Object.create = function(proto){
function F(){};
F.prototype = proto;
return new F;
}
}
ChildDrag.prototype = Object.create(Drag.prototype);
ChildDrag.prototype.constructor = ChildDrag;
var drag1 = new Drag(test1);
drag1.init();
ChildDrag.prototype.fnMove = function(e){
var L = e.clientX - this.disX;
var T = e.clientY - this.disY;
if(L < 0){L = 0;}
if(T < 0){T = 0;}
this.obj.style.left = L + 'px';
this.obj.style.top = T + 'px';
}
var drag2 = new ChildDrag(test2);
drag2.init();
</script>
javascript面向对象系列第五篇的更多相关文章
- javascript面向对象系列第五篇——拖拽的实现
前面的话 在之前的博客中,拖拽的实现使用了面向过程的写法.本文将以面向对象的写法来实现拖拽 写法 <style> .test{height: 50px;width: 50px;backgr ...
- javascript面向对象系列第三篇——实现继承的3种形式
× 目录 [1]原型继承 [2]伪类继承 [3]组合继承 前面的话 学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.本文是javascript面向对象系列第三篇——实现继承的3种形式 [ ...
- javascript面向对象系列第四篇——选项卡的实现
前面的话 面向对象的应用并非只是读几本书那么容易,需要有大量的工程实践做基础才能真正理解并学会使用它.本文将用面向对象的技术来制作一个简单的选项卡 图示说明 由图示结果看到,这是一个非常简单的选项卡. ...
- javascript面向对象系列第四篇——OOP中的常见概念
前面的话 面向对象描述了一种代码的组织结构形式——一种在软件中对真实世界中问题领域的建模方法.本文将从理论层面,介绍javascript面向对象程序程序(OOP)中一些常见的概念 对象 所谓对象,本质 ...
- 深入理解javascript作用域系列第五篇——一张图理解执行环境和作用域
× 目录 [1]图示 [2]概念 [3]说明[4]总结 前面的话 对于执行环境(execution context)和作用域(scope)并不容易区分,甚至很多人认为它们就是一回事,只是高程和犀牛书关 ...
- 深入理解javascript作用域系列第五篇
前面的话 对于执行环境(execution context)和作用域(scope)并不容易区分,甚至很多人认为它们就是一回事,只是高程和犀牛书关于作用域的两种不同翻译而已.但实际上,它们并不相同,却相 ...
- 前端学PHP之面向对象系列第五篇——对象操作
× 目录 [1]对象克隆 [2]对象比较[3]对象串行化[4]json 前面的话 本文主要介绍面向对象中的一些对象操作 对象克隆 对象复制,又叫对象克隆,可以通过 clone 关键字来完成 在多数情况 ...
- javascript运动系列第五篇——缓冲运动和弹性运动
× 目录 [1]缓冲运动 [2]弹性运动 [3]距离分析[4]步长分析[5]弹性过界[6]弹性菜单[7]弹性拖拽 前面的话 缓冲运动指的是减速运动,减速到0的时候,元素正好停在目标点.而弹性运动同样是 ...
- javascript动画系列第五篇——模拟滚动条
× 目录 [1]原理介绍 [2]数字加减 [3]元素尺寸[4]内容滚动 前面的话 当元素内容溢出元素尺寸范围时,会出现滚动条.但由于滚动条在各浏览器下表现不同,兼容性不好.所以,模拟滚动条也是很常见的 ...
随机推荐
- ubuntu环境下eclipse的安装以及hadoop插件的配置
ubuntu环境下eclipse的安装以及hadoop插件的配置 一.eclipse的安装 在ubuntu桌面模式下,点击任务栏中的ubuntu软件中心,在搜索栏搜索eclipse 注意:安装过程需要 ...
- Spring Aop、拦截器、过滤器的区别
Filter过滤器:拦截web访问url地址.Interceptor拦截器:拦截以 .action结尾的url,拦截Action的访问.Spring AOP拦截器:只能拦截Spring管理Bean的访 ...
- 在springMVC中使用自定义注解来进行登录拦截控制
1:java注解使用是相当频繁,特别是在搭建一些框架时,用到类的反射获取方法和属性,用的尤其多. java中元注解有四个: @Retention @Target @Document ...
- 判断最小生成树是否为一（krustra）
题目链接:https://vjudge.net/contest/66965#problem/K 具体思路: 首先跑一遍最短路算法,然后将使用到的边标记一下,同时使用一个数组记录每一个权值出现的次数,如 ...
- UNIX网络编程 第3章 套接字编程简介
套接字结构类型和相关的格式转换函数
- Java并发编程(2) AbstractQueuedSynchronizer的内部结构
一 前言 虽然已经有很多前辈已经分析过AbstractQueuedSynchronizer(简称AQS,也叫队列同步器)类,但是感觉那些点始终是别人的,看一遍甚至几遍终不会印象深刻.所以还是记录下来印 ...
- 使用 script 命令记录用户操作行为
Script 命令可以帮助管理员记录用户的操作行为,包括用户查看文件中的哪些具体内容,写入了哪些文件,写了些什么都能看到,比较详细的记录了用户的操作行为. 本文对此进行简要说明. 1.添加日志记录 e ...
- 79.ZYNQ内部私有定时器中断
上篇文章实现了了PS接受来自PL的中断,本片文章将在ZYNQ的纯PS里实现私有定时器中断.每个一秒中断一次,在中断函数里计数加1,通过串口打印输出. *本文所使用的开发板是Miz702(兼容zedbo ...
- Error: No resource found that matches the given name (at 'icon' with value '@mipmap/Icon')
问题: error: Error: No resource found that matches the given name (at 'icon' with value '@mipmap/Icon' ...
- Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPENED.
在设置请求头的时候报这个Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPE ...