JavaScript + CSS3 实现的海报画廊特效-白红宇

原文:

　　这是慕课网上《CSS3+JS 实现超炫的散列画廊特效》的源代码，我修改了一些 bug 和调优了一些细节，并把学习过程中并不了解的知识点以及一些基本思路用注释写在了源码里供以后查阅，同时欢迎指正其中的问题。

　　源课程视频地址：http://www.imooc.com/learn/366

            
             海报画廊

　　最后，这是数据文件 data.js 的代码，随便填了点内容在里面：

var data = [];var dataStr = '1、霍比特人3
\
\导演：彼得·杰克逊
\编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金
\主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...
\类型：动作 / 奇幻 / 冒险
\制片国家/地区：美国 / 新西兰
\语言：英语
\上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)
\片长：144分钟
\
\
\2、博物馆奇妙夜3
\
\导演：彼得·杰克逊
\编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金
\主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...
\类型：动作 / 奇幻 / 冒险
\制片国家/地区：美国 / 新西兰
\语言：英语
\上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)
\片长：144分钟
\
\
\3、饥饿游戏
\
\导演：彼得·杰克逊
\编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金
\主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...
\类型：动作 / 奇幻 / 冒险
\制片国家/地区：美国 / 新西兰
\语言：英语
\上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)
\片长：144分钟
\
\
\4、爆裂鼓手
\
\导演：彼得·杰克逊
\编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金
\主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...
\类型：动作 / 奇幻 / 冒险
\制片国家/地区：美国 / 新西兰
\语言：英语
\上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)
\片长：144分钟
\
\
\5、利维坦
\
\导演：彼得·杰克逊
\编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金
\主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...
\类型：动作 / 奇幻 / 冒险
\制片国家/地区：美国 / 新西兰
\语言：英语
\上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)
\片长：144分钟
\
\
\6、侏罗纪世界
\
\导演：彼得·杰克逊
\编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金
\主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...
\类型：动作 / 奇幻 / 冒险
\制片国家/地区：美国 / 新西兰
\语言：英语
\上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)
\片长：144分钟
\
\
\7、杀破狼2
\
\导演：彼得·杰克逊
\编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金
\主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...
\类型：动作 / 奇幻 / 冒险
\制片国家/地区：美国 / 新西兰
\语言：英语
\上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)
\片长：144分钟
\
\
\8、分歧者2：绝地反击
\
\导演：彼得·杰克逊
\编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金
\主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...
\类型：动作 / 奇幻 / 冒险
\制片国家/地区：美国 / 新西兰
\语言：英语
\上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)
\片长：144分钟
\
\
\9、少年班
\
\导演：彼得·杰克逊
\编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金
\主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...
\类型：动作 / 奇幻 / 冒险
\制片国家/地区：美国 / 新西兰
\语言：英语
\上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)
\片长：144分钟
\
\
\10、我的男友和狗
\
\导演：彼得·杰克逊
\编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金
\主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...
\类型：动作 / 奇幻 / 冒险
\制片国家/地区：美国 / 新西兰
\语言：英语
\上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)
\片长：144分钟
\
\
\11、末日崩塌
\
\导演：彼得·杰克逊
\编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金
\主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...
\类型：动作 / 奇幻 / 冒险
\制片国家/地区：美国 / 新西兰
\语言：英语
\上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)
\片长：144分钟
\
\
\12、惊魂电影院
\
\导演：彼得·杰克逊
\编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金
\主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...
\类型：动作 / 奇幻 / 冒险
\制片国家/地区：美国 / 新西兰
\语言：英语
\上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)
\片长：144分钟
\
\
\13、哆啦A梦：伴我同行
\
\导演：彼得·杰克逊
\编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金
\主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...
\类型：动作 / 奇幻 / 冒险
\制片国家/地区：美国 / 新西兰
\语言：英语
\上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)
\片长：144分钟
\
\
\14、念念
\
\导演：彼得·杰克逊
\编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金
\主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...
\类型：动作 / 奇幻 / 冒险
\制片国家/地区：美国 / 新西兰
\语言：英语
\上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)
\片长：144分钟
\
\
\15、横冲直撞好莱坞
\
\导演：彼得·杰克逊
\编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金
\主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...
\类型：动作 / 奇幻 / 冒险
\制片国家/地区：美国 / 新西兰
\语言：英语
\上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)
\片长：144分钟
\
\
\16、再次出发
\
\导演：彼得·杰克逊
\编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金
\主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...
\类型：动作 / 奇幻 / 冒险
\制片国家/地区：美国 / 新西兰
\语言：英语
\上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)
\片长：144分钟
\
\
\17、听说
\
\导演：彼得·杰克逊
\编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金
\主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...
\类型：动作 / 奇幻 / 冒险
\制片国家/地区：美国 / 新西兰
\语言：英语
\上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)
\片长：144分钟
\
\
\18、拳霸风云
\
\导演：彼得·杰克逊
\编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金
\主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...
\类型：动作 / 奇幻 / 冒险
\制片国家/地区：美国 / 新西兰
\语言：英语
\上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)
\片长：144分钟
\
\
\19、因为谷桂花
\
\导演：彼得·杰克逊
\编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金
\主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...
\类型：动作 / 奇幻 / 冒险
\制片国家/地区：美国 / 新西兰
\语言：英语
\上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)
\片长：144分钟
\
\
\20、约定倒计时
\
\导演：彼得·杰克逊
\编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金
\主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...
\类型：动作 / 奇幻 / 冒险
\制片国家/地区：美国 / 新西兰
\语言：英语
\上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)
\片长：144分钟
\';var d = dataStr.split('
');for (var i = 0; i < d.length; i++) {    var c = d[i].split('
');    data.push({        img: c[0].replace('、', ' ') + '.jpg',        caption: c[0].split('、')[1],        desc: c[1]    });    //console.log(c[0].replace('、', ' ') + '.jpg');};

展开代码