javascript继承（七）—用继承的方式实现照片墙功能

照片墙DEMO下载注意：图片有四种类型：1可放大；2可拖动；3既可放大也可拖动；4都不行。由于每个图片的构造函数不同而不同（目前在火狐上调试的，其它的浏览器可能不行，请见谅，主要讲继承的思想。以后会考虑兼容性的）

照片墙的实现是比较容易的，网上也有许许多多的事例。本篇文章将着重介绍一下用继承的方式怎么样去实现。使用继承又能带来怎样的好处。我们知道面向对象的优势在于可扩展性，这篇文章主要就是用面向对象的思想。

下面将具体的介绍如何实现照片墙：

首先是布局，将所有照片按顺序排列并不难，因为图片的宽高是不固定的，所以这儿只需要定义图片的高就行了，宽度会根据高度来缩放。又因为要实现拖动的效果，所以在这里必须给每张图片加了个属性positon:absolute。简单的看下布局代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>照片墙</title>

<style>

*{margin:0;padding:0}

body{background:#DBDCD6}

.wallTitle{margin:20px auto; width:200px; font-size: 60px;}

#photo_wall{margin:0 auto;position:relative;width:1100px;}

#photo_wall img{

    height:80px;

    border: 7px solid #FFFFFF;

    box-shadow: 1px 1px 1px #AAAAAA;

    margin:20px;

    cursor:pointer;

    position:absolute;

    z-index:1;

}

</style>

</head>

<body>

<div class="wallTitle">照片墙</div>

<div id="photo_wall"></div>

</body>

<script src="js/utilJs.js"></script>

<script src="js/Photo.js"></script>

<script src="js/PhotoChild1.js"></script>

<script src="js/PhotoChild2.js"></script>

<script src="js/PhotoChild3.js"></script>

<script>

window.onload = function(){

    var oDiv = document.getElementById('photo_wall')

    ,aWallHtmlArray = [] //拼接字符串数组

    ,aPhotoArray = []; //相片路径地址

    for(var i =0;i<100;i++){

        aPhotoArray.push('images/'+(1+Math.round(Math.random()*9))+'.jpg');//产生1到10的图片路径

         var sImgLeft = 140*(i%8);

        var sImgTop = 150*(Math.ceil((i+1)/8)-1);

        aWallHtmlArray.push('<img id="photo_'+i+'" src="'+aPhotoArray[i]+'" style="left:'+sImgLeft+'px;top:'+sImgTop+'px"/>');

    }

    oDiv.innerHTML = aWallHtmlArray.join('');

    for(var i =0;i<100;i++){

        var id = 'photo_'+i;

        var rotateAngle = i%2==0?10+Math.round(Math.random()*40):-10+Math.round(Math.random()*(-40));//旋转角度

        switch(i%4){

            case 0:

              new PhotoChild1('photo_'+i,rotateAngle);//放大缩小

              break;

            case 1:

              new PhotoChild2('photo_'+i,rotateAngle);//可拖动

              break;

            case 2:

              new PhotoChild3('photo_'+i,rotateAngle);//即放大又可拖动

              break;

            default:

              new Photo('photo_'+i,rotateAngle);//只能旋转

        }

    }

}

</script>

</html>

因为需要添加的图片比较多，所以直接在js里进行字符串拼接的的。通过上面的代码可以看到，我们创建了四个类，即父类 Photo,子类1 PhotoChild1,子类2 PhotoChild2,子类3 PhotoChild3。为了使照片墙更有层次感一点，在代码中添加了一个旋转角度。下面介绍这几个类的作用，首先是父类代码如下：

/*相片父类，拥有三个方法:

1、初始化方法旋转一定角度10－50度

2、鼠标移入恢复正常

3、移入又偏移相同角度*/

function Photo(sPhotoId,rotateAngle){

    this.oPhoto = document.getElementById(sPhotoId);

    this.rotateAngle = rotateAngle;

    this.rotate();

    this.mouseEnter();

    this.mouseLeave();

}

Photo.prototype = {

    //旋转一定角度

    rotate:function(){

        var sRotate = 'rotate('+this.rotateAngle+'deg)';

        this.oPhoto.style.transform = sRotate;

        this.oPhoto.style.MozTransform = sRotate;

        this.oPhoto.style.webkitTransform = sRotate;

    },

    mouseEnter:function(){

        var _this = this;

        _this.oPhoto.onmouseenter = function(){

            var sRotate = 'rotate(0deg)';

            _this.oPhoto.style.transform = sRotate;

            _this.oPhoto.style.MozTransform = sRotate;

            _this.oPhoto.style.webkitTransform = sRotate;

        }

    },

    mouseLeave:function(){

        var _this = this;

        _this.oPhoto.onmouseleave = function(){

            var sRotate = 'rotate('+_this.rotateAngle+'deg)';

            _this.oPhoto.style.transform = sRotate;

            _this.oPhoto.style.MozTransform = sRotate;

            _this.oPhoto.style.webkitTransform = sRotate;

        }

    }

}

作为父类有三个方法，旋转角度，在页面的初始化时调用，鼠标移入移出，在父类中主要实现图片角度的调整功能。即移入图片正常显示，移出偏移一定角度。

子类1代码:

//子类1继承Photo,重写了父类的mouseEnter和mouseLeave,实现移动放大移出缩小功能

function PhotoChild1(sPhotoId,rotateAngle){

    Photo.call(this,sPhotoId,rotateAngle);

    this.sOldHeight = getStyle(this.oPhoto,'height').replace('px','');

    this.sOldWidth = getStyle(this.oPhoto,'width').replace('px','');

}

function Empty(){}

Empty.prototype = Photo.prototype;

PhotoChild1.prototype = new Empty();

PhotoChild1.prototype.constructor = PhotoChild1;

//重写鼠标移入方法

PhotoChild1.prototype.mouseEnter = function(){

    var _this = this;

    _this.oPhoto.onmouseenter = function(){

        var sRotate = 'rotate(0deg)';

        _this.oPhoto.style.transform = sRotate;

        _this.oPhoto.style.MozTransform = sRotate;

        _this.oPhoto.style.webkitTransform = sRotate;

        _this.oPhoto.style.zIndex = 2;

        startMove(_this.oPhoto,{width:_this.sOldWidth*3,height:_this.sOldHeight*3});

    }

}

//重写鼠标移出方法

PhotoChild1.prototype.mouseLeave = function(){

    var _this = this;

    _this.oPhoto.onmouseleave = function(){

        var sRotate = 'rotate('+_this.rotateAngle+'deg)';

        _this.oPhoto.style.transform = sRotate;

        _this.oPhoto.style.MozTransform = sRotate;

        _this.oPhoto.style.webkitTransform = sRotate;

        _this.oPhoto.style.zIndex = 1;

        startMove(_this.oPhoto,{width:_this.sOldWidth,height:_this.sOldHeight});

    }

}

可以看到子类1继承了父类的属性和方法，并且对移入和移出的方法进行重写。实现了移入不仅仅恢复偏移角度，还放大3倍的功能，移出则恢复初始状态，这里用到已经封装好的工具函数，引用的utilJs代码。

下面看看子类2的代码：

function PhotoChild2(sPhotoId,rotateAngle){

    Photo.call(this,sPhotoId,rotateAngle);

    this.sOldHeight = getStyle(this.oPhoto,'height').replace('px','');

    this.sOldWidth = getStyle(this.oPhoto,'width').replace('px','');

    this.drag();

}

function Empty(){}

Empty.prototype = Photo.prototype;

PhotoChild2.prototype = new Empty();

PhotoChild2.prototype.constructor = PhotoChild2;

PhotoChild2.prototype.drag = function(){

    new Drag(this.oPhoto);

}

也继承了父类的属性和方法，并且新加了一个共有方法drag，即实现了可拖动的功能，当然这个类也引用了Drag这个方法，同样也在utilJs里。

而子类3的代码如下：

//继承父类，扩展新增了拖动方法

function PhotoChild3(sPhotoId,rotateAngle){

    PhotoChild2.call(this,sPhotoId,rotateAngle);

    PhotoChild1.call(this,sPhotoId,rotateAngle);

    this.drag();

}

for(var i in PhotoChild2.prototype){PhotoChild3.prototype[i] = PhotoChild2.prototype[i]}

for(var i in PhotoChild1.prototype){PhotoChild3.prototype[i] = PhotoChild1.prototype[i]}

可以看到子类3继承了子类1和子类2，实现了一个多继承，当然对于js里的多继承可能存在各种各样的问题，这里不一一讨论，但我们这儿利用多继承让子类3实现了子类1和子类2的方法。即可以放大、拖动。

总结：通过这个事例，可以看到面向对象的思想在js里同样很强大。这儿把每一个图片看作一个对象，分别对每一个对象进行操作，添加功能就是十分方便，当然以后扩展起来也十分容易，只需要去继承父类，实现你想要的效果就行了。

javascript继承（七）—用继承的方式实现照片墙功能的更多相关文章

JavaScript高级特性-实现继承的七种方式
声明和约定: 在C++和Java中,我们可以通过关键字class来声明一个类,在JavaScript中没有这个关键字,但我们知道可以通过new一个function创建对象,这个function类似C+ ...
javascript实现继承3种方式：原型继承、借用构造函数继承、组合继承，模拟extends方法继承
javascript中实现继承的三种方式:原型继承.借用构造函数继承.混合继承: /* js当中的继承 js中构造函数原型对象实力对象的关系: 1 构造函数.prototype = 原型对象 2 ...
JavaScript的3种继承方式
JavaScript的继承方式有多种,这里列举3种,分别是原型继承.类继承以及混合继承. 1.原型继承优点:既继承了父类的模板,又继承了父类的原型对象: 缺点:不是子类实例传参,而是需要通过父类实例 ...
JavaScript 常见的六种继承方式
JavaScript 常见的六种继承方式前言面向对象编程很重要的一个方面,就是对象的继承.A 对象通过继承 B 对象,就能直接拥有 B 对象的所有属性和方法.这对于代码的复用是非常有用的. 大部分 ...
JavaScript是如何实现继承的(六种方式)
大多OO语言都支持两种继承方式: 接口继承和实现继承 ,而ECMAScript中无法实现接口继承,ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现,下文给大家技术js实现继承的 ...
JavaScript的几种继承方式
看<JavaScript高级程序设计>做的一些笔记 ECMAScript只支持实现继承,不支持接口继承(因为函数没有签名) 原型链(实现继承的主要方法): function SuperTy ...
js(javascript) 继承的5种实现方式
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt240 js继承有5种实现方式:1.继承第一种方式:对象冒充 functio ...
Javascript中用来实现继承的几种方式
一.原型链继承原理:修改子类型的原型,使其指向父类型的实例: 缺点: 1,不能以字面量方式在子类型的原型上添加新方法:这回重新改写子类型的原型: 2 创建子类型的实例时无法向父类型的构造函数传参. ...
javascript 模拟java 实现继承的5种方式
1.继承第一种方式:对象冒充 function Parent(username){ this.username = username; this.hello = function(){ alert(t ...

随机推荐

openresty(nginx)、lua、drizzle调研
一.概述: 1.研究目标:nginx中使用lua脚本,及nginx直接访问mysql,redis 2.需要安装的内容: openresty,mysql,redis 3.OpenResty (也称为 n ...
虚拟机centos6.5 --设置静态ip
编辑网卡文件,vi /etc/sysconfig/network-scripts/ifcfg-eth0修改以下内容: ONBOOT=no #改为yes, BOOTPROTO=dbcp #改为stati ...
Linux学习之二——档案与目录的属性和权限
一.属性和权限的基本概念 Linux一般将档案可存取的身份分为三个类别,分别是 owner/group/others,这三种身份各有 read/write/execute 等权限. 所有的系统上的账号 ...
php session文件修改路径
默认状态下php的 sess_文件会生成到/tmp目录下,1天的时间就会生成很多,由于/tmp目录下还有别的重要文件,所以看起来不爽.具体更改做法是,找到 php.ini文件里面的session.sa ...
Listview的点击事件
上篇文章总结了如何自定义listview的显示内容,然而listview不能只是提供显示功能,还必须能够点击它显示一些东西: listView.setOnItemClickListener(new O ...
pace.js – 加载进度条插件
这儿只是简单介绍一下这个插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容 ...
Codeforces Round #FF/#255 D DZY Loves Modification --贪心+优先队列
题意:给你一个矩阵,每次选某一行或者某一列,得到的价值为那一行或列的和,然后该行每个元素减去p.问连续取k次能得到的最大总价值为多少. 解法: 如果p=0,即永远不减数,那么最优肯定是取每行或每列那个 ...
C++基础笔记（二）C++对C的扩展
Xcode创建C++项目 1.新建一个MAC工程(command line tool) 2.导入头文件 3.修改文件后缀(*.m-->*.mm) 4.修改主函数中的OC代码为C++的代码动 ...
mongoVUE1.5.3 破解方法
MongoVUE是个免费软件,但超过15天后功能受限.可以通过删除以下注册表项来解除限制: [HKEY_CURRENT_USER\Software\Classes\CLSID\{B1159E65-82 ...
查看和设置oracle数据库的最大连接数
当前的连接数 select count(*) from v$process; 设置的最大连接数(默认值为150) select value from v$parameter where name = ...

javascript继承（七）—用继承的方式实现照片墙功能

javascript继承（七）—用继承的方式实现照片墙功能的更多相关文章

随机推荐

热门专题