一个javascript继承和使用的例子
继承可以帮助我们实现代码的重用，把对象的属性写入构造函数，对象的方法写入原型后，以下例子演示继承的使用：
示例的css和js在后
父实例，得到一个间隔1s的轮播：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>parent</title>
<script src="js/lanquery.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/lantrap.css" />
</head> <body>
<script type="text/javascript">
window.onload = function() {
var ar = ['img/font-1.jpg', 'img/font-3.jpg'];
new Move(ar);
}
</script>
</body> </html>
现在我们要得到一个间隔为3s的轮播，只需要：
1 使用 父类.call(this,属性) 的方式继承属性；
2 使用 拷贝继承 for(var i in 父类.prototype) {子类.prototype[i] = 父类.prototype[i]｝
或者类式继承或者原型继承的方法继承对象方法
3 改变继承的具体方法 子类.prototype.具体方法=function(){}来改变对象方法
三步得到间隔为3s的轮播子示例：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>child</title>
<script src="js/lanquery.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/lantrap.css" />
</head> <body>
<script type="text/javascript">
window.onload = function() {
var ar = ['img/font-1.jpg', 'img/font-3.jpg']; function SubMove(id) {
Move.call(this, id);
}
//拷贝继承
for(var i in Move.prototype) {
SubMove.prototype[i] = Move.prototype[i];
}
//类式继承，引用，子类改变会影响父类,通过构建中间类
// function middleMove(){};
// middleMove.prototype=Move.prototype;
// SubMove.prototype= new middleMove();
// SubMove.prototype.constructor=middleMove;
SubMove.prototype.moveOut = function() {
clearInterval(this.rotateImg.timer);
var this1 = this;
this.arrows.style.display = "none";
this.rotateImg.timer = setInterval(function() {
this1.autoplay(this1.num);
}, 3000)
}
new SubMove(ar);
}
</script>
</body>
</html>
javascript代码：
function animation(obj, target) {
var speed;
clearInterval(obj.timer);
obj.timer = setInterval(function() {
speed = (target - obj.offsetLeft) / 10;
speed = (speed > 0 ? Math.ceil(speed) : Math.floor(speed));
obj.style.left = obj.offsetLeft + speed + "px";
if(obj.offsetLeft == target) {
clearInterval(obj.timer);
}
}, 20)
}
function Move() {
this.imgArr = [];
if(Array.isArray(arguments[0])) {
console.log('is array');
this.imgArr = arguments[0];
} else {
if(arguments.length <= 1) {
alert('请指定至少两张图片');
}
for(var a = 0; a < arguments.length; a++) {
this.imgArr.push(arguments[a]);
}
}
this.makeDiv();
var rotateImg = document.getElementById('rotateImg');
this.rotateImg = rotateImg;
this.imgUl = rotateImg.children[0].children[0];
this.imgList = rotateImg.children[0].children[0].children;
this.dotUl = rotateImg.children[1];
this.arrows = rotateImg.children[2];
this.prev = this.arrows.children[0];
this.next = this.arrows.children[1];
this.width = rotateImg.offsetWidth;
this.num = 0;
//clone first image
var newLiFirstImgClone = this.imgUl.children[0].cloneNode(true);
this.imgUl.appendChild(newLiFirstImgClone);
//1、create dot according to number of images and append it
for(var i = 1; i < this.imgList.length; i++) {
var newDot = document.createElement("li");
newDot.innerHTML = i;
this.dotUl.appendChild(newDot);
}
var _this = this;
this.dotLiArray = this.dotUl.children;
this.light(this.num);
//2 click dot,transform image and light dot
for(var k = 0; k < this.dotLiArray.length; k++) {
this.dotLiArray[k].index = k;
this.dotLiArray[k].onclick = function() {
_this.num = this.index;
_this.light(_this.num);
animation(_this.imgUl, -_this.num * _this.width);
}
}
//3 next
this.next.onclick = function() {
_this.autoplay();
}
//自动播放
rotateImg.timer = setInterval(function() {
_this.autoplay(this.num);
}, 1000);
//4、previous
this.prev.onclick = function() {
_this.movePrev();
}
//5 when mouse move over elements,stop rotate and show arrow
rotateImg.onmouseover = function() {
_this.moveOver();
}
//6 when mouse out star rotate and hide arrow
rotateImg.onmouseout = function() {
_this.moveOut();
}
}
Move.prototype.light = function(index) {
for(var j = 0; j < this.dotLiArray.length; j++) {
this.dotLiArray[j].className = "";
}
this.dotLiArray[index].className = "light";
}
Move.prototype.autoplay = function(num) {
this.num++;
if(this.num == this.imgUl.children.length - 1) {
this.light(0);
//if img comes to the clone img,light the first dot
} else if(this.num == this.imgUl.children.length) {
//if img is in the end ,set position to second img in a flash
this.imgUl.style.left = 0;
this.num = 1;
this.light(this.num);
} else {
this.light(this.num);
}
animation(this.imgUl, -this.num * this.width);
}
Move.prototype.movePrev = function() {
this.num--;
if(this.num == -1) {
//if image comes to the end then transform it before the clone image
this.imgUl.style.left = -this.width * (this.imgUl.children.length - 1) + "px";
//change img position suddenly
this.num = this.imgUl.children.length - 2;
}
this.light(this.num)
animation(this.imgUl, -this.num * this.width);
}
Move.prototype.moveOver = function() {
clearInterval(this.rotateImg.timer);
this.arrows.style.display = "block";
}
Move.prototype.moveOut = function() {
clearInterval(this.rotateImg.timer);
var this1 = this;
this.arrows.style.display = "none";
this.rotateImg.timer = setInterval(function() {
this1.autoplay(this1.num);
}, 1000)
}
Move.prototype.makeDiv = function() {
var div = document.createElement('div');
var str = '';
for(var i = 0; i < this.imgArr.length; i++) {
str += '<li><a href="#"><img src="' + this.imgArr[i] + '" alt="" /></a></li>'
}
var rlis = str;
var slide = ' <div id="rotateImg"><div id="imgcontainer"><ul>' + rlis + '</ul></div><ul></ul><div class="arrows"><div class="prev"><</div><div class="next">></div></div></div>';
div.innerHTML = slide;
document.body.append(div);
}
css样式：
* {
margin:;
padding:;
list-style: none;
}
#rotateImg {
width: 400px;
height: 220px;
margin: 100px auto;
position: relative;
font: 12px helvetica;
overflow: hidden;
}
img {
width: 400px;
height: 220px;
}
#rotateImg>ul {
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -60px;
}
#rotateImg>ul>li {
float: left;
/*list-style: none;*/
cursor: pointer;
width: 16px;
height: 16px;
margin-right: 10px;
text-align: center;
line-height: 16px;
border-radius: 8px;
background: #fff;
}
#rotateImg>ul>li.light {
background: red;
color: #fff;
}
#imgcontainer {
width: 100%;
}
#imgcontainer>ul {
width: 1000%;
height: 220px;
list-style: none;
position: absolute;
}
#imgcontainer>ul li {
float: left;
}
.arrows {
position: absolute;
width: 100%;
height: 40px;
top: 50%;
margin-top: -20px;
display: none;
color: red;
}
.arrows .prev,
.arrows .next {
height: 40px;
width: 40px;
line-height: 40px;
text-align: center;
font: 600 30px/40px "simsun";
background: rgba(0, 0, 0, 0.2);
cursor: pointer;
}
.arrows .prev {
float: left;
}
.arrows .next {
float: right;
}
一个javascript继承和使用的例子的更多相关文章
- javascript继承的三种模式
javascript继承一般有三种模式:组合继承,原型式继承和寄生式继承: 1组合继承:javascript最为广泛的继承方式通过原型链实现对原型属性和方法的继承,通过构造函数实现对实例属性的继承,同 ...
- 图解JavaScript 继承
JavaScript作为一个面向对象语言,可以实现继承是必不可少的,但是由于本身并没有类的概念(不知道这样说是否严谨,但在js中一切都类皆是对象模拟)所以在JavaScript中的继承也区别于其他的面 ...
- [原创]JavaScript继承详解
原文链接:http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html 面向对象与基于对象 几乎每个开发人员都有面向对象语言(比如C++. ...
- 【JavaScript】重温Javascript继承机制
上段时间,团队内部有过好几次给力的分享,这里对西风师傅分享的继承机制稍作整理一下,适当加了些口语化的描述,留作备案. 一.讲个故事吧 澄清在先,Java和Javascript是雷锋和雷峰塔的关系.Ja ...
- 【转载】JavaScript继承详解（二）
这一章我们将会重点介绍JavaScript中几个重要的属性(this.constructor.prototype), 这些属性对于我们理解如何实现JavaScript中的类和继承起着至关重要的作用. ...
- 【转载】JavaScript继承详解一
面向对象与基于对象 几乎每个开发人员都有面向对象语言(比如C++.C#.Java)的开发经验. 在传统面向对象的语言中,有两个非常重要的概念 - 类和实例. 类定义了一类事物公共的行为和方法:而实例则 ...
- JavaScript继承详解
面向对象与基于对象 在传统面向对象的语言中,有两个非常重要的概念 - 类和实例. 类定义了一类事物公共的行为和方法:而实例则是类的一个具体实现. 我们还知道,面向对象编程有三个重要的概念 - 封装.继 ...
- 闲聊javascript继承和原型
javascript继承已经是被说烂的话题了,我就随便聊一点~ 一.javascript的复制继承 javascript的继承有复制继承和原型继承,基于复制继承用的不太多,而且无法通过instance ...
- JavaScript继承详解（四）
在本章中,我们将分析Douglas Crockford关于JavaScript继承的一个实现 - Classical Inheritance in JavaScript. Crockford是Java ...
随机推荐
- AJAX进行分页
新建数据集:PagingDataSet.xsd SELECT * from ( select id, areaID, area, father,Row_Number() over (order by ...
- Bootstrap 历练实例 - 折叠（Collapse）插件方法
方法 下面是一些折叠(Collapse)插件中有用的方法: 方法 描述 实例 Options:.collapse(options) 激活内容为可折叠元素.接受一个可选的 options 对象. $(' ...
- linux 环境能变量配置
1, 3.配置环境变量 在/etc/profile文件末尾中添加以下环境变量:(我上面的JDK目录是jdk1.6.0_45,所以下面JAVA_HOME中也是这个) export JAVA_HOME=/ ...
- iOS开发遇到的坑之七--上传app Stroe被拒绝：The app references non-public symbols in : _UICreateCGImageFromIOSurface
这是上学期遇到的问题了,突然查阅邮箱的时候发现了,遂在这里记录下来,希望大家以后注意这个问题 我上传App Store的时候,apple给我发的邮件原文: Dear developer, We hav ...
- 爬虫学习（四）——post请求爬取
百度翻译爬取数据 import urllib.requestimport urllib.parsepost_url = "https://fanyi.baidu.com/sug"h ...
- mysql优化之explain各参数详解：
explain简介 explain命令可以获取Mysql如何执行select语句的信息,包括在select语句执行过程中表如何连接和连接的顺序.当我们想知道这个表操作是索引查询还是全表扫描时,我们就可 ...
- docker安装后无法启动问题
问题报错: Error starting daemon: Error initializing network controller: list bridge addresses failed: no ...
- 关于使用Java开发Mis系统
如何使用Java开发一个小型的信息管理系统,首先我们应该知道要使用什么样的方法. 1.Java基础 2.JSP+Servlet+JavaBean JSP是服务器端的编程语言,见得比较多的是在一些网站上 ...
- C++从键盘读入数组并存储
C++从键盘读取任意长度的数组,现总结如下: //读取指定长度的数组 int main() { int n = 0; cin >> n; vector<int> p(n); f ...
- 刷表法动态规划：HOJ11391_Word Clouds Revisited
题目大意,给若干方块,让把方块拍成若干行,使得最终高度最小.其中,每行有宽度限制,高度为每行中最高的箱子的高度. 于是,很直观的认为,这个题可能也许大概应该是个动态规划的题. 于是,设DP[K]为K及 ...