JavaScript + CSS3 实现的海报画廊特效
原文:JavaScript + CSS3 实现的海报画廊特效
这是慕课网上《CSS3+JS 实现超炫的散列画廊特效》的源代码，我修改了一些 bug 和调优了一些细节，并把学习过程中并不了解的知识点以及一些基本思路用注释写在了源码里供以后查阅，同时欢迎指正其中的问题。
源课程视频地址：http://www.imooc.com/learn/366
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>海报画廊</title> <style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
background-color: #fff;
color: #555;
font-family: 'Avenir Next', 'Lantinghei SC';
font-size: 14px;
/*-webkit-font-smoothing：none | subpixel-antialiased | antialiased
*none：对低像素的文本比较好
*subpixel-antialiased：默认值
*antialiased：抗锯齿 *-moz-osx-font-smoothing是mozilla给特定操作系统推出的特性增强
*设置grayscale对于图标字体表现更清晰，减轻次像素渲染带来的相邻像素色彩污染问题
*/
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.wrap{
width: 100%;
height: 600px;
position: absolute;
top: 50%;
margin-top: -300px;
background-color: #333;
overflow: hidden;
/*perspective 是 CSS3 属性，目前浏览器都不支持 perspective 属性，
*Chrome 和 Safari 支持替代的 -webkit-perspective 属性。 *perspective 属性定义 3D 元素距视图的距离，以像素计，其值越小，用户与3D空间Z平面距离越近，视觉效果更令人印象深刻；
*反之，值越大，用户与3D空间Z平面距离越远，视觉效果就很小
*当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身，perspective 属性只影响 3D 转换元素
*与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置 *perspective: number | none;
*number：元素距离视图的距离，以像素计(px 可以不写)
*none：默认值，与 0 相同，不设置透视 *在3D变形中，除了perspective属性可以激活一个3D空间之外，在3D变形的函数中的perspective()也可以激活3D空间。
*他们不同的地方是：perspective用在舞台元素上（变形元素们的共同父元素）；perspective()就是用在当前变形元素上，
*并且可以与其他的transform函数一起使用。例如，我们可以把：
*.stage {perspective: 600px;} 写成 .stage .box {transform: perspective(600px);}
*perspective()函数取值只能大于0，如果取值为0或比0小的值，将无法激活3D空间
*/
perspective: 800px;
-webkit-perspective: 800px;
}
/* 海报样式 s*/
.photo{
position: absolute;
width: 260px;
height: 320px;
z-index: 1;
box-shadow: 0 0 1px rgba(0, 0, 0, .01);
/*IE 10、Firefox、Opera 和 Chrome 支持 transition 属性
*Safari 支持替代的 -webkit-transition 属性
*Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性 *transition 属性是一个简写属性(默认值：all 0 ease 0)，用于设置四个过渡属性：
*transition-property，定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔；all 则所有属性都将获得过渡效果
*transition-duration，规定完成过渡效果需要多少秒或毫秒，必须始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果
*transition-timing-function，规定速度效果的速度曲线(linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n))
*transition-delay，定义过渡效果何时开始
*/
transition: all .5s;
-moz-transition: all .5s; /* Firefox 4 */
-webkit-transition: all .5s; /* Safari 和 Chrome */
-o-transition: all .5s; /* Opera */ /*初始化时每张海报都居中显示，然后通过 JavaScript 设置除中间海报外的随机位置，会产生从中间发散的效果时候时候，
*切换中间海报的时候，由于中间海报瞬间失去了 .photo_center 的样式，但仍然还有 .photo 的样式，再被设置随机样式后会有平滑的过渡效果
*/
left: 50%;
top: 50%;
margin: -160px 0 0 -130px;
}
.photo .photo-wrap .side{
position: absolute;
width: 100%;
height: 100%;
background-color: #eee;
top: 0;
right: 0;
padding: 20px;
/*IE8+、Opera 以及 Chrome 支持 box-sizing 属性，Firefox 支持替代的 -moz-box-sizing 属性。 *box-sizing: content-box | border-box | inherit
*content-box：默认值，按W3C盒模型进行处理 (element width = border + padding + border + content)
*border-box：按IE6盒模型进行处理 (element width = content)
*/
box-sizing: border-box;
-moz-box-sizing：border-box; /*
*IE 10+ 和 Firefox 支持 backface-visibility 属性，Opera 15+、Safari 和 Chrome 支持替代的 -webkit-backface-visibility 属性
*backface-visibility 属性定义当元素不面向屏幕时是否可见
*backface-visibility: visible | hidden
*visible：背面是可见的
*hidden：背面是不可见的
*/
backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome 和 Safari */
-moz-backface-visibility:hidden; /* Firefox */
-ms-backface-visibility:hidden; /* Internet Explorer */
} .photo .photo-wrap .side-front{
/*
*IE 10、Firefox、Opera 支持 transform 属性，IE 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）
*Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换），Opera 只支持 2D 转换 *transform: none | rotate | scale | skew | translate | matrix
*如果有多个变换函数的时候，以空格分开
*none: 表示不进行变换
*rotate：旋转。rotate(<angle>) ：通过指定的角度参数对原元素指定一个 2D rotation，需先有 transform-origin 属性的定义 *scale：缩放。元素的缩放中心点是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小；
*scale(x,y)使元素水平方向和垂直方向同时缩放；如果第二个参数未提供，则取与第一个参数一样的值；
*scaleX(x)元素仅水平方向缩放；scaleY(y)元素仅垂直方向缩放；其中 x, y 为数字 *skew：扭曲。默认以元素中心为基点，也可以通过transform-origin来改变元素的基点位置；
*skew(x,y)使元素在水平和垂直方向同时扭曲，如果没有设置第二个参数，那么Y轴为0deg；
*skewX(x)仅使元素在水平方向扭曲变形；skewY(y)仅使元素在垂直方向扭曲变形，其中 x, y 为角度 *translate：移动。移动物体时基点默认为元素中心点，也可以根据 transform-origin 进行改变基点；
*translate(x,y)水平方向和垂直方向同时移动，如果第二个参数未提供，则以 0 作为其值；
*translateX(x)仅水平方向移动；translateY(y)仅垂直方向移动；其中 x, y 为像素值 *matrix：矩阵。
*更多参考：http://www.w3cplus.com/content/css3-transform/
*/
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
} .photo .photo-wrap .side-front .image{
width: 100%;
height: 250px;
line-height: 250px;
overflow: hidden;
}
.photo .photo-wrap .side-front .image img{
width: 100%;
vertical-align: middle;/*使高度不够的图片居中显示*/
}
.photo .photo-wrap .side-front .caption{
text-align: center;
font-size: 16px;
line-height: 50px;
}
/* 初始化时使 side-back 沿Y轴旋转180度，即在背面显示 */
.photo .photo-wrap .side-back{
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
}
.photo .photo-wrap .side-back .desc{
color: #666;
font-size: 14px;
line-height: 1.5em;
}
/*当前选中的海报样式*/
.photo_center{
top: 50%;
left: 50%;
margin: -160px 0 0 -130px;
z-index: 2;
}
/*负责翻转*/
.photo .photo-wrap{
position: absolute;
width: 100%;
height: 100%;
/*
*IE不支持，Firefox 支持 transform-style 属性，Chrome、Safari 和 Opera 支持替代的 -webkit-transform-style 属性
*transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
*transform-style: flat | preserve-3d
*flat: 子元素将不保留其 3D 位置
*preserve-3d: 子元素将保留其 3D 位置
*一般而言，该声明应用在3D变换的兄弟元素们的父元素上，也就是舞台元素
*更多参考：http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
*/
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d; transition: all .6s ease-in-out;
-webkit-transition: all .6s ease-in-out;/* Safari 和 Chrome */
-moz-transition: all .5s; /* Firefox 4 */
-o-transition: all .5s; /* Opera */ /*
*IE 10、Firefox、Opera 支持 transform-origin 属性，IE 9 支持替代的 -ms-transform-origin 属性（仅适用于 2D 转换），
*Safari 和 Chrome 支持替代的 -webkit-transform-origin 属性（3D 和 2D 转换），Opera 只支持 2D 转换
*transform-origin: x-axis y-axis z-axis; 设置旋转元素的基点位置
*x-axis：定义视图被置于 X 轴的何处。可能的值：left | center | right | length | %
*y-axis：定义视图被置于 Y 轴的何处。可能的值：top | center | bottom | length | %
*z-axis：定义视图被置于 Z 轴的何处。可能的值：length
*/
transform-origin: 0% 50% 0px;
-ms-transform-origin: 0% 50% 0px;/* IE 9 */
-o-transform-origin: 0% 50% 0px;/* Opera */
-webkit-transform-origin: 0% 50% 0px;/* Safari 和 Chrome */
-moz-transform-origin: 0% 50% 0px;/* Firefox */
}
.photo_front .photo-wrap{/* .photo_front 是添加到 div.photo 的类 */
transform: translate(0px, 0px) rotateY(0deg);
-webkit-transform: translate(0px, 0px) rotateY(0deg);
-moz-transform: translate(0px, 0px) rotateY(0deg);
-o-transform: translate(0px, 0px) rotateY(0deg);
-ms-transform: translate(0px, 0px) rotateY(0deg);
}
.photo_back .photo-wrap{/* .photo_back 是添加到 div.photo 的类*/
transform: translate(260px, 0px) rotateY(180deg);
-webkit-transform: translate(260px, 0px) rotateY(180deg);
-moz-transform: translate(260px, 0px) rotateY(180deg);
-o-transform: translate(260px, 0px) rotateY(180deg);
-ms-transform: translate(260px, 0px) rotateY(180deg);
} /* 添加控制按钮的样式 */
@font-face{
font-family: 'icomoon';
src: url('images/icomoon.woff') format('woff');
font-weight: normal;
font-size: normal;
}
.nav{
position: absolute;
width: 80%;
left: 10%;
height: 30px;
line-height: 30px;
bottom: 20px;
z-index: 3;
text-align: center;
}
/* 普通样式 */
.nav .i{
display: inline-block;
width: 30px;
height: 30px;
cursor: pointer;
background-color: #aaa;
text-align: center;
border-radius: 50px;
transform: scale(.5);
-webkit-transform: scale(.5);
-moz-transform: scale(.5);
-o-transform: scale(.5);
-ms-transform: scale(.5); transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
}
/* 设置并显示字体图标 */
.nav .i:after{
content: '\e965';
font-family: 'icomoon';
font-size: 80%;
display: inline-block;
line-height: 30px;
text-align: center;
color: #fff;
opacity: 0;
}
/* 选中样式 */
.nav .i_current{
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
}
.nav .i_current:after{
opacity: 1;
}
/* 背面样式 */
.nav .i_back{
background-color: #555;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
}
</style>
</head>
<!-- 禁止用户选中网页上的内容，IE及Chrome下的方法一样，使用 onselectstart="return false"
-- Firefox 下，控制 css: body {-moz-user-select: none;}
-->
<body onselectstart="return false;" style="-moz-user-select:none;">
<div class="wrap" id="wrap"></div> <script type="text/javascript" src="data:images/data.js"></script>
<script type="text/javascript">
// 3.通用函数，返回被选择的元素或元素集合
function g(selector){
return selector.substring(0, 1) == '.' ? document.getElementsByClassName(selector.substring(1)) : document.getElementById(selector.substring(1));
}
/*随机数生成函数，在给定的范围内(random([min, max]))随机生成一个值，
*因为此案例要在 20 张海报中随机选取一张居中显示，以及在左右两个分区内随机摆放
*剩余海报，因为海报数量和左右区域都是有限制的，所以必须在给定范围内生成随机数。
*传入的参数 range 是一个包含两个数值的数组，这两个数值即是给定范围的最小值(包含)和最大值(包含)
*Math.random() 随机生成介于 0.0 ~ 1.0 之间的一个伪随机数
*/
function random(range){
var min = Math.min(range[0], range[1]);
var max = Math.max(range[0], range[1]);
var diff = max - min;
/*
*例如 [1, 20]，则 diff = 19 --> 0 <= Math.round(Math.random() * diff) <= 19
*然后再加上最小值，即可随机生成 1 ~ 20 之间的任意数，如果使用 Math.floor() 则
*生成 1 ~ 19 之间的任意数，使用 Math.ceil() 则生成 2 ~ 20 之间的任意数
*/
var number = Math.round(Math.random() * diff) + min;
return number;
}
// 4.输出所有的海报
/*
*也可以使用模板替换的方法：
<div class="wrap" id="wrap">
<div class="photo photo_front" onclick="turn(this)" id="photo_{{index}}"> <!-- div.photo负责位移、旋转（平面上xy旋转）-->
<div class="photo-wrap"> <!-- div.photo-wrap负责3D翻转（正反面切换）-->
<div class="side side-front">
<p class="image"><img src="data:images/{{img}}"></p>
<p class="caption">{{caption}}</p>
</div>
<div class="side side-back">
<p class="desc">{{desc}}</p>
</div>
</div>
</div>
<div class="nav">
<span id="nav_{{index}}" onclick="turn(g('#photo_{{index}}'))" class="i"></span>
</div>
</div>
*以上是静态模板，然后在 JavaScript 中对其中的 {{}} 关键字进行替换：
function addPhotos(){
var template = g('#wrap').innerHTML;
var html = [];
var nav=[]; for(var i = 0; i < data.length; i++){//for in循环中的循环计数器是字符串，而不是数字它包含当前属性的名称或当前数组元素的索引
var _html = template.replace('{{index}}', i + 1).replace('{{img}}', data[i].img).replace('{{caption}}', data[i].caption).replace('{{desc}}', data[i].desc);
html.push(_html); nav.push('<span id="nav_' + (i + 1) + '" onclick="turn(g(\'#photo_' + (i + 1) + '\'))" class="i"></span>');
} html.push('<div class="nav">' + nav.join('') + '</div>');
g('#wrap').innerHTML = html.join(''); rsort(random([1, data.length]));
}
*这样也可以实现输出所有海报，但是在刷新页面的一瞬间，文字部分会显示 {{}} 关键字没有被替换之前的样子，
*因此我修改为纯 JavaScript 写入的方式
*/
function addPhotos(){
var _wrap = '';
var _nav = '';
for(var i = 0; i < data.length; i++){//for in 循环中的循环计数器是字符串，而不是数字它包含当前属性的名称或当前数组元素的索引
_wrap += '<div class="photo photo_front" onclick="turn(this)" id="photo_' + (i + 1) + '"><div class="photo-wrap"><div class="side side-front"><p class="image"><img src="data:images/' + data[i].img + '"></p><p class="caption">' + data[i].caption + '</p></div><div class="side side-back"><p class="desc">' + data[i].desc + '</p></div></div></div></div>'; _nav += '<span id="nav_' + (i + 1) + '" onclick="turn(g(\'#photo_' + (i + 1) + '\'))" class="i"></span>';
}
var navigation = '<div class="nav">' + _nav + '</div>'
g('#wrap').innerHTML = _wrap + navigation; rsort(random([1, data.length]));
} addPhotos();
// 6.计算左右分区的范围，使其他海报的显示不会超出此范围
function range(){
/*{left: {x: [左侧区域 left 的最小值, 左侧区域 left 的最大值], y: [左侧区域 top 的最小值, 左侧区域 top 的最大值]},
*right: {x: [右侧区域 left 的最小值, 右侧区域 left 的最大值], y: [右侧区域 top 的最小值, 右侧区域 top 的最大值]}}
*/
var range = {
left: {
x: [],
y: []
},
right: {
x: [],
y: []
}
};
//获取最外围容器的宽度和高度
var wrap = {
width: g('#wrap').clientWidth,
height: g('#wrap').clientHeight
};
//获取每一张海报的宽度和高度，因为海报的大小都是一样的，所以取第一张
var photo = {
width: g('.photo')[0].clientWidth,
height: g('.photo')[0].clientHeight
};
//按照自己想要显示的区域进行计算，左右区域的高度 (top) 范围是一样的
range.left.x = [0 - photo.width / 4 + 130, wrap.width / 2 - photo.width * 5 / 4 + 130];
range.left.y = [0 - photo.height / 4 + 160, wrap.height - photo.height * 3 / 4 + 160];
range.right.x = [wrap.width / 2 + photo.width / 4 + 130, wrap.width - photo.width / 4 + 130];
range.right.y = range.left.y; return range;
}
// 5.排序海报
function rsort(n){
var _photo = g('.photo');
var photos = [];
for(var i = 0; i < _photo.length; i++){
_photo[i].className = 'photo photo_front';
/*重排序之前去除所有图片样式*/
_photo[i].style.left = '';
_photo[i].style.top = '';
/*一般来说，访问对象属性时使用的都是点表示法，不过，在 JavaScript 中也可以使用方括号表示法来访问
*对象的属性。在使用方括号语法时，应该将要访问的属性以字符串的形式放在方括号中，如下面的例子所示:
alert(person["name"]); //"Nicholas"
alert(person.name); //"Nicholas"
*方括号语法的主要优点是可以通过变量来访问属性，如果属性名中包含会导致语法错误的字符，或者属性名
*使用的是关键字或保留字，也可以使用方括号表示法。例如：
person["first name"] = "Nicholas";
*通常，除非必须使用变量来访问属性，否则建议使用点表示法。(《JavaScript 高级程序设计》P85)
*/
_photo[i].style['transform'] = _photo[i].style['-webkit-transform'] = 'scale(1.3)'; photos.push(_photo[i]);
}
var photo_center = g('#photo_' + n);
photo_center.className += ' photo_center'; photo_center = photos.splice(n-1, 1);//把photo_center从数组里删掉，splice() 方法会改变原始数组
// 把剩下的海报分为左右两部分
var photos_left = photos.splice(0, Math.ceil(photos.length / 2));
var photos_right = photos;
var ranges = range();
// 对左右区域的海报位置进行随机赋值
for(var j = 0; j < photos_left.length; j++){
var photo = photos_left[j];
photo.style.left = random(ranges.left.x) + 'px';
photo.style.top = random(ranges.left.y) + 'px';
photo.style['transform'] = photo.style['-webkit-transform'] = 'rotate(' + random([-150, 150]) + 'deg) scale(1)';
}
for(var s = 0; s < photos_right.length; s++){
var photo = photos_right[s];
photo.style.left = random(ranges.right.x) + 'px';
photo.style.top = random(ranges.right.y) + 'px';
photo.style['transform'] = photo.style['-webkit-transform'] = 'rotate(' + random([-150, 150]) + 'deg) scale(1)';
}
// 控制按钮处理
var navs = g('.i');
for(var k = 0; k < navs.length; k++){
navs[k].className = 'i';
}
g('#nav_' + n).className += ' i_current';
}
/*1.翻面控制，每个元素的 onclick() 事件都绑定此函数，如果点击的元素不是中间的海报，则取得其
* id 进行重新排序，使其在中间显示；如果点击的是中间的海报则让它翻面，同时控制按钮也要翻面
*/
function turn(elem){
var cls = elem.className;
var n = elem.id.split('_')[1];//var n = elem.id.substr(-1, 1)，但是不推荐 substr;
if(!/photo_center/.test(cls)){//判断当前点击的元素是不是 photo_center，不是的话不执行后面的翻转而进行海报排序
return rsort(n);
}
if(/photo_front/.test(cls)){
cls = cls.replace(/photo_front/, 'photo_back');
g('#nav_' + n).className += ' i_back';//同时处理控制按钮
} else{
cls = cls.replace(/photo_back/, 'photo_front');
g('#nav_' + n).className = g('#nav_' + n).className.replace(/\s*i_back\s*/, ' ');//同时处理控制按钮
} elem.className = cls;
}
</script>
</body>
</html>
最后，这是数据文件 data.js 的代码，随便填了点内容在里面：
var data = [];
var dataStr = '1、霍比特人3<br>\
<br>\
导演：彼得·杰克逊<br>\
编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金<br>\
主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...<br>\
类型：动作 / 奇幻 / 冒险<br>\
制片国家/地区：美国 / 新西兰<br>\
语言：英语<br>\
上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)<br>\
片长：144分钟<br>\
<br>\
<br>\
2、博物馆奇妙夜3<br>\
<br>\
导演：彼得·杰克逊<br>\
编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金<br>\
主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...<br>\
类型：动作 / 奇幻 / 冒险<br>\
制片国家/地区：美国 / 新西兰<br>\
语言：英语<br>\
上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)<br>\
片长：144分钟<br>\
<br>\
<br>\
3、饥饿游戏<br>\
<br>\
导演：彼得·杰克逊<br>\
编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金<br>\
主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...<br>\
类型：动作 / 奇幻 / 冒险<br>\
制片国家/地区：美国 / 新西兰<br>\
语言：英语<br>\
上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)<br>\
片长：144分钟<br>\
<br>\
<br>\
4、爆裂鼓手<br>\
<br>\
导演：彼得·杰克逊<br>\
编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金<br>\
主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...<br>\
类型：动作 / 奇幻 / 冒险<br>\
制片国家/地区：美国 / 新西兰<br>\
语言：英语<br>\
上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)<br>\
片长：144分钟<br>\
<br>\
<br>\
5、利维坦<br>\
<br>\
导演：彼得·杰克逊<br>\
编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金<br>\
主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...<br>\
类型：动作 / 奇幻 / 冒险<br>\
制片国家/地区：美国 / 新西兰<br>\
语言：英语<br>\
上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)<br>\
片长：144分钟<br>\
<br>\
<br>\
6、侏罗纪世界<br>\
<br>\
导演：彼得·杰克逊<br>\
编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金<br>\
主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...<br>\
类型：动作 / 奇幻 / 冒险<br>\
制片国家/地区：美国 / 新西兰<br>\
语言：英语<br>\
上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)<br>\
片长：144分钟<br>\
<br>\
<br>\
7、杀破狼2<br>\
<br>\
导演：彼得·杰克逊<br>\
编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金<br>\
主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...<br>\
类型：动作 / 奇幻 / 冒险<br>\
制片国家/地区：美国 / 新西兰<br>\
语言：英语<br>\
上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)<br>\
片长：144分钟<br>\
<br>\
<br>\
8、分歧者2：绝地反击<br>\
<br>\
导演：彼得·杰克逊<br>\
编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金<br>\
主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...<br>\
类型：动作 / 奇幻 / 冒险<br>\
制片国家/地区：美国 / 新西兰<br>\
语言：英语<br>\
上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)<br>\
片长：144分钟<br>\
<br>\
<br>\
9、少年班<br>\
<br>\
导演：彼得·杰克逊<br>\
编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金<br>\
主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...<br>\
类型：动作 / 奇幻 / 冒险<br>\
制片国家/地区：美国 / 新西兰<br>\
语言：英语<br>\
上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)<br>\
片长：144分钟<br>\
<br>\
<br>\
10、我的男友和狗<br>\
<br>\
导演：彼得·杰克逊<br>\
编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金<br>\
主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...<br>\
类型：动作 / 奇幻 / 冒险<br>\
制片国家/地区：美国 / 新西兰<br>\
语言：英语<br>\
上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)<br>\
片长：144分钟<br>\
<br>\
<br>\
11、末日崩塌<br>\
<br>\
导演：彼得·杰克逊<br>\
编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金<br>\
主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...<br>\
类型：动作 / 奇幻 / 冒险<br>\
制片国家/地区：美国 / 新西兰<br>\
语言：英语<br>\
上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)<br>\
片长：144分钟<br>\
<br>\
<br>\
12、惊魂电影院<br>\
<br>\
导演：彼得·杰克逊<br>\
编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金<br>\
主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...<br>\
类型：动作 / 奇幻 / 冒险<br>\
制片国家/地区：美国 / 新西兰<br>\
语言：英语<br>\
上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)<br>\
片长：144分钟<br>\
<br>\
<br>\
13、哆啦A梦：伴我同行<br>\
<br>\
导演：彼得·杰克逊<br>\
编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金<br>\
主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...<br>\
类型：动作 / 奇幻 / 冒险<br>\
制片国家/地区：美国 / 新西兰<br>\
语言：英语<br>\
上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)<br>\
片长：144分钟<br>\
<br>\
<br>\
14、念念<br>\
<br>\
导演：彼得·杰克逊<br>\
编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金<br>\
主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...<br>\
类型：动作 / 奇幻 / 冒险<br>\
制片国家/地区：美国 / 新西兰<br>\
语言：英语<br>\
上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)<br>\
片长：144分钟<br>\
<br>\
<br>\
15、横冲直撞好莱坞<br>\
<br>\
导演：彼得·杰克逊<br>\
编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金<br>\
主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...<br>\
类型：动作 / 奇幻 / 冒险<br>\
制片国家/地区：美国 / 新西兰<br>\
语言：英语<br>\
上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)<br>\
片长：144分钟<br>\
<br>\
<br>\
16、再次出发<br>\
<br>\
导演：彼得·杰克逊<br>\
编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金<br>\
主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...<br>\
类型：动作 / 奇幻 / 冒险<br>\
制片国家/地区：美国 / 新西兰<br>\
语言：英语<br>\
上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)<br>\
片长：144分钟<br>\
<br>\
<br>\
17、听说<br>\
<br>\
导演：彼得·杰克逊<br>\
编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金<br>\
主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...<br>\
类型：动作 / 奇幻 / 冒险<br>\
制片国家/地区：美国 / 新西兰<br>\
语言：英语<br>\
上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)<br>\
片长：144分钟<br>\
<br>\
<br>\
18、拳霸风云<br>\
<br>\
导演：彼得·杰克逊<br>\
编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金<br>\
主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...<br>\
类型：动作 / 奇幻 / 冒险<br>\
制片国家/地区：美国 / 新西兰<br>\
语言：英语<br>\
上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)<br>\
片长：144分钟<br>\
<br>\
<br>\
19、因为谷桂花<br>\
<br>\
导演：彼得·杰克逊<br>\
编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金<br>\
主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...<br>\
类型：动作 / 奇幻 / 冒险<br>\
制片国家/地区：美国 / 新西兰<br>\
语言：英语<br>\
上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)<br>\
片长：144分钟<br>\
<br>\
<br>\
20、约定倒计时<br>\
<br>\
导演：彼得·杰克逊<br>\
编剧：弗兰·威尔士 / 费力怕·报恩寺 / 彼得·杰克逊 / 吉尔默·德尔·托罗 / J·R·R·托尔金<br>\
主演：马丁·福瑞曼 / 伊恩·麦克莱恩 / 理查德·阿尔第七 / 伊万杰琳·莉莉 / 李·佩斯 / 更多...<br>\
类型：动作 / 奇幻 / 冒险<br>\
制片国家/地区：美国 / 新西兰<br>\
语言：英语<br>\
上映日期：2015-01-23(中国大陆) / 2014-12-17(美国)<br>\
片长：144分钟<br>\
';
var d = dataStr.split('<br><br><br>');
for (var i = 0; i < d.length; i++) {
var c = d[i].split('<br><br>');
data.push({
img: c[0].replace('、', ' ') + '.jpg',
caption: c[0].split('、')[1],
desc: c[1]
});
//console.log(c[0].replace('、', ' ') + '.jpg');
};
展开代码
JavaScript + CSS3 实现的海报画廊特效的更多相关文章
- 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件
这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览 ...
- jQuery+CSS3实现404背景动画特效
效果:http://hovertree.com/texiao/jquery/74/ 源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm 效果图如下: 代码如下: ...
- Carousel 旋转画廊特效的疑难杂症
疑难杂症 该画廊特效的特点就是前后元素有层级关系. 我想很多人应该看过或者用过这个插件carousel.js,网上也有相关的教程.不知道这个插件的原型是哪个,有知道的朋友可以告诉我. 该插件相对完美, ...
- 纯CSS3实现动态火车行驶特效
上次开完飞机,这次开火车 查看效果:http://hovertree.com/texiao/css3/7/ 效果图: 代码如下: <!DOCTYPE html> <html> ...
- 使用javascript生成的植物显示过程特效
查看效果:http://keleyi.com/keleyi/phtml/html5/33.htm .NET版本:http://keleyi.com/a/bjac/66mql4bc.htm 完整HTML ...
- 纯css3 加载loading动画特效
最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...
- 基于css3的文字3D翻转特效
一款基于css3的文字3D翻转特效.这款特效当鼠标经过文字的时候3D翻转显示阴影.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="compo ...
- 基于css3的3D立方体旋转特效
今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : ...
- jQuery/CSS3实现图片层叠展开特效
这是一款基于jQuery和CSS3的图片层叠展开特效,让鼠标滑过图片时即可触发这些特效.其中有一款就像扇子展开收拢一样,看起来效果都非常不错.当然本文主要还是来分析一下用jQuery实现这一效果的方法 ...
随机推荐
- 基于visual Studio2013解决C语言竞赛题之0601判断素数函数
题目 解决代码及点评 //编写一函数判断一个数是否为素数 #include<stdio.h> #include <stdlib.h> # ...
- C#根据域名查询IP(CMD命令参数输入或者启动程序后再输入查询)
有时因为需要,希望知道域名的IP,那用C#怎么实现呢?以下是实现代码 using System; using System.Collections.Generic; using System.Linq ...
- C#文件上传和文件下载
#region 文件上传 private void UpLoadFile(string fileName, string fileNamePath, string uriString) { ); if ...
- ZOJ3768 夹逼查找【STL__lower_bound()_的应用】
首先学习一下lower_bound() 函数lower_bound()在first和last中的前闭后开区间进行二分查找,返回大于或等于val的第一个元素位置.如果所有元素都小于val,则返回last ...
- Storyboard中使用UIscrollView添加约束的开发总结
第一次在项目中用storyboard做界面,一般的界面直接添加约束非常爽快 然后有个界面有scrollview,添加了约束还总是出错 刚开始使用了 wCompact,hRegular,滑动出现问题,有 ...
- JVM调优总结（十）-调优方法
JVM调优工具 Jconsole,jProfile,VisualVM Jconsole : jdk自带,功能简单,但是可以在系统有一定负荷的情况下使用.对垃圾回收算法有很详细的跟踪.详细说明参考这里 ...
- 转：git windows中文 乱码问题解决汇总
it的Windows版本Msysgit对中文的支持不够好 .当使用时,会出现以下三种情况的中文乱码: 下面的几个文件都在git安装目录下文件夹etc内.1.ls不能显示中文目录 解决办法:在git/g ...
- 利用git下载skia库
1.准备好cygwin或者gitbash(github下载) 2.进入进入https://android.googlesource.com/,搜索skia,进入. 3.进入后最上面会显示下载方法:gi ...
- elasticsearch的javaAPI之query
elasticsearch的javaAPI之query API the Search API同意运行一个搜索查询,返回一个与查询匹配的结果(hits). 它能够在跨一个或多个index上运行, 或者一 ...
- Android 富文本框实现 RichEditText
Android系统自带控件没有富文本框控件,如果想写一封带格式的邮件基本上不可能,EdtiText只有默认一种格式,显示不能滿足要求,!!正好项目需要研究了一下,开发了此控件,现将一些源代码开放一下, ...