JavaScript + CSS3 實現的海報畫廊特效

時間  2019-11-13
標籤 javascript css3 css 實現 海報 畫廊 特效 欄目 JavaScript 简体版
原文   原文鏈接

　　這是慕課網上《CSS3+JS 實現超炫的散列畫廊特效》的源代碼，我修改了一些 bug 和調優了一些細節，並把學習過程當中並不瞭解的知識點以及一些基本思路用註釋寫在了源碼裏供之後查閱，同時歡迎指正其中的問題。javascript

　　源課程視頻地址：http://www.imooc.com/learn/366css

<!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 十、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 十、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 十、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="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="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="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 的代碼，隨便填了點內容在裏面：html

var data = [];
var dataStr = '一、霍比特人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>\
三、飢餓遊戲<br>\
<br>\
導演：彼得·傑克遜<br>\
編劇：弗蘭·威爾士 / 費力怕·報恩寺 / 彼得·傑克遜 / 吉爾默·德爾·託羅 / J·R·R·托爾金<br>\
主演：馬丁·福瑞曼 / 伊恩·麥克萊恩 / 理查德·阿爾第七 / 伊萬傑琳·莉莉 / 李·佩斯 / 更多...<br>\
類型：動做 / 奇幻 / 冒險<br>\
製片國家/地區：美國 / 新西蘭<br>\
語言：英語<br>\
上映日期：2015-01-23(中國大陸) / 2014-12-17(美國)<br>\
片長：144分鐘<br>\
<br>\
<br>\
四、爆裂鼓手<br>\
<br>\
導演：彼得·傑克遜<br>\
編劇：弗蘭·威爾士 / 費力怕·報恩寺 / 彼得·傑克遜 / 吉爾默·德爾·託羅 / J·R·R·托爾金<br>\
主演：馬丁·福瑞曼 / 伊恩·麥克萊恩 / 理查德·阿爾第七 / 伊萬傑琳·莉莉 / 李·佩斯 / 更多...<br>\
類型：動做 / 奇幻 / 冒險<br>\
製片國家/地區：美國 / 新西蘭<br>\
語言：英語<br>\
上映日期：2015-01-23(中國大陸) / 2014-12-17(美國)<br>\
片長：144分鐘<br>\
<br>\
<br>\
五、利維坦<br>\
<br>\
導演：彼得·傑克遜<br>\
編劇：弗蘭·威爾士 / 費力怕·報恩寺 / 彼得·傑克遜 / 吉爾默·德爾·託羅 / J·R·R·托爾金<br>\
主演：馬丁·福瑞曼 / 伊恩·麥克萊恩 / 理查德·阿爾第七 / 伊萬傑琳·莉莉 / 李·佩斯 / 更多...<br>\
類型：動做 / 奇幻 / 冒險<br>\
製片國家/地區：美國 / 新西蘭<br>\
語言：英語<br>\
上映日期：2015-01-23(中國大陸) / 2014-12-17(美國)<br>\
片長：144分鐘<br>\
<br>\
<br>\
六、侏羅紀世界<br>\
<br>\
導演：彼得·傑克遜<br>\
編劇：弗蘭·威爾士 / 費力怕·報恩寺 / 彼得·傑克遜 / 吉爾默·德爾·託羅 / J·R·R·托爾金<br>\
主演：馬丁·福瑞曼 / 伊恩·麥克萊恩 / 理查德·阿爾第七 / 伊萬傑琳·莉莉 / 李·佩斯 / 更多...<br>\
類型：動做 / 奇幻 / 冒險<br>\
製片國家/地區：美國 / 新西蘭<br>\
語言：英語<br>\
上映日期：2015-01-23(中國大陸) / 2014-12-17(美國)<br>\
片長：144分鐘<br>\
<br>\
<br>\
七、殺破狼2<br>\
<br>\
導演：彼得·傑克遜<br>\
編劇：弗蘭·威爾士 / 費力怕·報恩寺 / 彼得·傑克遜 / 吉爾默·德爾·託羅 / J·R·R·托爾金<br>\
主演：馬丁·福瑞曼 / 伊恩·麥克萊恩 / 理查德·阿爾第七 / 伊萬傑琳·莉莉 / 李·佩斯 / 更多...<br>\
類型：動做 / 奇幻 / 冒險<br>\
製片國家/地區：美國 / 新西蘭<br>\
語言：英語<br>\
上映日期：2015-01-23(中國大陸) / 2014-12-17(美國)<br>\
片長：144分鐘<br>\
<br>\
<br>\
八、分歧者2：絕地反擊<br>\
<br>\
導演：彼得·傑克遜<br>\
編劇：弗蘭·威爾士 / 費力怕·報恩寺 / 彼得·傑克遜 / 吉爾默·德爾·託羅 / J·R·R·托爾金<br>\
主演：馬丁·福瑞曼 / 伊恩·麥克萊恩 / 理查德·阿爾第七 / 伊萬傑琳·莉莉 / 李·佩斯 / 更多...<br>\
類型：動做 / 奇幻 / 冒險<br>\
製片國家/地區：美國 / 新西蘭<br>\
語言：英語<br>\
上映日期：2015-01-23(中國大陸) / 2014-12-17(美國)<br>\
片長：144分鐘<br>\
<br>\
<br>\
九、少年班<br>\
<br>\
導演：彼得·傑克遜<br>\
編劇：弗蘭·威爾士 / 費力怕·報恩寺 / 彼得·傑克遜 / 吉爾默·德爾·託羅 / J·R·R·托爾金<br>\
主演：馬丁·福瑞曼 / 伊恩·麥克萊恩 / 理查德·阿爾第七 / 伊萬傑琳·莉莉 / 李·佩斯 / 更多...<br>\
類型：動做 / 奇幻 / 冒險<br>\
製片國家/地區：美國 / 新西蘭<br>\
語言：英語<br>\
上映日期：2015-01-23(中國大陸) / 2014-12-17(美國)<br>\
片長：144分鐘<br>\
<br>\
<br>\
十、個人男朋友和狗<br>\
<br>\
導演：彼得·傑克遜<br>\
編劇：弗蘭·威爾士 / 費力怕·報恩寺 / 彼得·傑克遜 / 吉爾默·德爾·託羅 / J·R·R·托爾金<br>\
主演：馬丁·福瑞曼 / 伊恩·麥克萊恩 / 理查德·阿爾第七 / 伊萬傑琳·莉莉 / 李·佩斯 / 更多...<br>\
類型：動做 / 奇幻 / 冒險<br>\
製片國家/地區：美國 / 新西蘭<br>\
語言：英語<br>\
上映日期：2015-01-23(中國大陸) / 2014-12-17(美國)<br>\
片長：144分鐘<br>\
<br>\
<br>\
十一、末日崩塌<br>\
<br>\
導演：彼得·傑克遜<br>\
編劇：弗蘭·威爾士 / 費力怕·報恩寺 / 彼得·傑克遜 / 吉爾默·德爾·託羅 / J·R·R·托爾金<br>\
主演：馬丁·福瑞曼 / 伊恩·麥克萊恩 / 理查德·阿爾第七 / 伊萬傑琳·莉莉 / 李·佩斯 / 更多...<br>\
類型：動做 / 奇幻 / 冒險<br>\
製片國家/地區：美國 / 新西蘭<br>\
語言：英語<br>\
上映日期：2015-01-23(中國大陸) / 2014-12-17(美國)<br>\
片長：144分鐘<br>\
<br>\
<br>\
十二、驚魂電影院<br>\
<br>\
導演：彼得·傑克遜<br>\
編劇：弗蘭·威爾士 / 費力怕·報恩寺 / 彼得·傑克遜 / 吉爾默·德爾·託羅 / J·R·R·托爾金<br>\
主演：馬丁·福瑞曼 / 伊恩·麥克萊恩 / 理查德·阿爾第七 / 伊萬傑琳·莉莉 / 李·佩斯 / 更多...<br>\
類型：動做 / 奇幻 / 冒險<br>\
製片國家/地區：美國 / 新西蘭<br>\
語言：英語<br>\
上映日期：2015-01-23(中國大陸) / 2014-12-17(美國)<br>\
片長：144分鐘<br>\
<br>\
<br>\
1三、哆啦A夢：伴我同行<br>\
<br>\
導演：彼得·傑克遜<br>\
編劇：弗蘭·威爾士 / 費力怕·報恩寺 / 彼得·傑克遜 / 吉爾默·德爾·託羅 / J·R·R·托爾金<br>\
主演：馬丁·福瑞曼 / 伊恩·麥克萊恩 / 理查德·阿爾第七 / 伊萬傑琳·莉莉 / 李·佩斯 / 更多...<br>\
類型：動做 / 奇幻 / 冒險<br>\
製片國家/地區：美國 / 新西蘭<br>\
語言：英語<br>\
上映日期：2015-01-23(中國大陸) / 2014-12-17(美國)<br>\
片長：144分鐘<br>\
<br>\
<br>\
1四、念念<br>\
<br>\
導演：彼得·傑克遜<br>\
編劇：弗蘭·威爾士 / 費力怕·報恩寺 / 彼得·傑克遜 / 吉爾默·德爾·託羅 / J·R·R·托爾金<br>\
主演：馬丁·福瑞曼 / 伊恩·麥克萊恩 / 理查德·阿爾第七 / 伊萬傑琳·莉莉 / 李·佩斯 / 更多...<br>\
類型：動做 / 奇幻 / 冒險<br>\
製片國家/地區：美國 / 新西蘭<br>\
語言：英語<br>\
上映日期：2015-01-23(中國大陸) / 2014-12-17(美國)<br>\
片長：144分鐘<br>\
<br>\
<br>\
1五、橫衝直撞好萊塢<br>\
<br>\
導演：彼得·傑克遜<br>\
編劇：弗蘭·威爾士 / 費力怕·報恩寺 / 彼得·傑克遜 / 吉爾默·德爾·託羅 / J·R·R·托爾金<br>\
主演：馬丁·福瑞曼 / 伊恩·麥克萊恩 / 理查德·阿爾第七 / 伊萬傑琳·莉莉 / 李·佩斯 / 更多...<br>\
類型：動做 / 奇幻 / 冒險<br>\
製片國家/地區：美國 / 新西蘭<br>\
語言：英語<br>\
上映日期：2015-01-23(中國大陸) / 2014-12-17(美國)<br>\
片長：144分鐘<br>\
<br>\
<br>\
1六、再次出發<br>\
<br>\
導演：彼得·傑克遜<br>\
編劇：弗蘭·威爾士 / 費力怕·報恩寺 / 彼得·傑克遜 / 吉爾默·德爾·託羅 / J·R·R·托爾金<br>\
主演：馬丁·福瑞曼 / 伊恩·麥克萊恩 / 理查德·阿爾第七 / 伊萬傑琳·莉莉 / 李·佩斯 / 更多...<br>\
類型：動做 / 奇幻 / 冒險<br>\
製片國家/地區：美國 / 新西蘭<br>\
語言：英語<br>\
上映日期：2015-01-23(中國大陸) / 2014-12-17(美國)<br>\
片長：144分鐘<br>\
<br>\
<br>\
1七、據說<br>\
<br>\
導演：彼得·傑克遜<br>\
編劇：弗蘭·威爾士 / 費力怕·報恩寺 / 彼得·傑克遜 / 吉爾默·德爾·託羅 / J·R·R·托爾金<br>\
主演：馬丁·福瑞曼 / 伊恩·麥克萊恩 / 理查德·阿爾第七 / 伊萬傑琳·莉莉 / 李·佩斯 / 更多...<br>\
類型：動做 / 奇幻 / 冒險<br>\
製片國家/地區：美國 / 新西蘭<br>\
語言：英語<br>\
上映日期：2015-01-23(中國大陸) / 2014-12-17(美國)<br>\
片長：144分鐘<br>\
<br>\
<br>\
1八、拳霸風雲<br>\
<br>\
導演：彼得·傑克遜<br>\
編劇：弗蘭·威爾士 / 費力怕·報恩寺 / 彼得·傑克遜 / 吉爾默·德爾·託羅 / J·R·R·托爾金<br>\
主演：馬丁·福瑞曼 / 伊恩·麥克萊恩 / 理查德·阿爾第七 / 伊萬傑琳·莉莉 / 李·佩斯 / 更多...<br>\
類型：動做 / 奇幻 / 冒險<br>\
製片國家/地區：美國 / 新西蘭<br>\
語言：英語<br>\
上映日期：2015-01-23(中國大陸) / 2014-12-17(美國)<br>\
片長：144分鐘<br>\
<br>\
<br>\
1九、由於谷桂花<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');
};
展開代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程