一个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 ...
随机推荐
- webpack4简单入门
安装webpack需要安装node环境,因此需要在电脑中安装node.node官网https://nodejs.org/,安装LTS版本即可. webpck基本概念 entry:分析依赖模块的入口 o ...
- Android系统编译环境及连接工具配置
首先附上官网上关于环境搭建的地址:https://source.android.com/setup/build/initializing 官网目前建议的还是Ubuntu14.04,下面就是用的Ubun ...
- Spring中注解大全和应用
@Controller@RestController:@Service@Autowired@RequestMapping@RequestParam@ModelAttribute@Cacheable@C ...
- jsp--提交表单→插入数据库→成功后返回提示信息
<%@ page language="java" import="java.util.*,java.sql.*" pageEncoding="u ...
- JavaScript 资源大全中文版
我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的资源整理.awesome-javascript 是 sorrycc 发起维护的 JS 资源列表,内容包括:包管理器.加 ...
- 本地Navicat连接虚拟机MySQL
安装完MySQL后,使用mysql命令进去,然后执行以下命令 grant all privileges on hive_metadata.* to 'hive'@'%' identified by ' ...
- Flask初学者：Python虚拟环境，Flask安装，helloworld，run方法
一.Python虚拟环境: 作用:使Python框架的不同版本可以在同一台电脑上运行.如果在电脑上全局(C盘或者其他目录)安装Flask(或其他Python框架),当你使用其他版本的Flask(比如有 ...
- 动态规划（入门，滚动数组，记录的都是状态）：SWUSTACM-1010 魔兽争霸之最后的反击
题目: 1010: 魔兽争霸之最后的反击 Time Li ...
- Android 简历+面试题 汇总
1.教你写简历 1.1.你真的会写简历吗? 1.2.80%以上简历都是不合格的 1.3.推荐两个技术简历模板 1.4.关于程序员求职简历 1.5.程序员简历模板列表 2.面试题 2.1.国内一线互联网 ...
- OpenCV学习笔记（十） 直方图操作
直方图计算 直方图可以统计的不仅仅是颜色灰度, 它可以统计任何图像特征 (如 梯度, 方向等等).直方图的一些具体细节: dims: 需要统计的特征的数目, 在上例中, dims = 1 因为我们仅仅 ...