淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 17018|回复: 84
收起左侧

【渔舟】个性MV播放器效果代码(仅供学习)

  [复制链接]
  • TA的每日心情
    抱抱
    2016-12-1 09:10
  • 签到天数: 4 天

    连续签到: 1 天

    [LV.2]登堂入室

    64

    主题

    164

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    53157

    QQ
    发表于 2014-3-4 10:56:38 | 显示全部楼层 |阅读模式
    有图有真相
    MV播放器.gif


    效果预览地址:http://yijohn.taobao.com/p/show.htm

    思路:这里依然使用的是Carousel轮播效果制作的内容,只不过这里把图换成了淘宝视频,再加上CSS3效果,就可以实现炫酷的播放器效果了。这个仅供学习研究,不建议放到店铺中。

    温馨提示:渔舟所发代码均为学习型代码,请勿直接套用。 这个代码需要一定的基础知识才能够应用。 新手可以到“渔舟教室”学习相关内容。

    渔舟教室地址:http://xiazai.yijohn.com


    废话不多说,上代码。

    1. <div style=" height:400px;">
    2.   <div class="footer-more-trigger" style="width:1600px; height:593px; border:0; padding:0; top:auto; left:auto;">
    3.     <div class="footer-more-trigger" style="width:1600px; height:593px; border:0; padding:0; top:auto; left:-325px; overflow:hidden;">
    4.       <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou01','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'delay':0,'duration':0.5}">
    5.      
    6.         <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou02','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.5}">
    7.           <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou03','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.52}">
    8.             <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou04','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.54}">
    9.               <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou05','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.56}">
    10.                 <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou06','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.58}">
    11.                   <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou07','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.6}">
    12.            
    13.                     <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou08','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.62}">
    14.                       <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou09','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.64}">
    15.                         <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou10','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.66}">
    16.                           <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou11','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.68}">
    17.                             <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou12','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.7}">
    18.                               <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou13','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.72}">
    19.                                 <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou14','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.74}">
    20.                                   <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou15','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.76}">
    21.                                     <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou16','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.78}">
    22.                                       <div style="width:100px; height:593px; float:left;">
    23.                                         <ul class="content_yuzhou01" style="width:100px; height:593px;">
    24.                     <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) 0 0 no-repeat;">
    25.                     <!--透明图链接遮罩-->
    26.                     <a href="http://item.taobao.com/item.htm?spm=a1z10.3.w4002-3822422589.77.apC69l&id=20063138080" target="_blank" class="footer-more-trigger" style="width:1600px; height:593px; border:0; padding:0; top:0; left:0; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2p6dwXrRaXXXXXXXX_!!41251343.gif) repeat; display:block; z-index:3;"></a>
    27.                     <!--//透明图链接遮罩 end-->
    28.                     
    29.                     <!--视频预告-->
    30.                     <!--
    31.                     <div class="footer-more-trigger" style="width:656px; height:369px; border:5px solid #fff; border-radius:5px; box-shadow:0 0 20px #B87A1E; padding:0; top:0; left:467px; z-index:5; margin-top:20px;">
    32.     <embed src="[flash]http://vodcdn.video.taobao.com/player/ugc/tb_mainpic_player_loader.swf?version=1.0.20131030.2&vid=10930961&uid=41251343&p=1&t=1&rid=&random=6666"[/flash] quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="656" height="369" wmode="transparent"></embed>
    33.     </div>
    34.     -->
    35.                     <!--//视频预告 end-->
    36.                     
    37.                     <!--bannermaker-->
    38.                     <div class="footer-more-trigger" style="width:950px; height:593px; border:0; padding:0; top:0; left:325px; z-index:2;">
    39.                                           <embed src="[flash]http://img1.tbcdn.cn/tfscom/T16yTGFedeXXXtxVjX.swf[/flash]" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="950" height="593" wmode="transparent"></embed>
    40.                     </div>
    41.                     <!--//bannermaker end-->
    42.                     </li>
    43.                                           <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat 0 0;">                      </li>
    44.                                           <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat 0 0;">                      </li>
    45.                                         </ul>
    46.                      
    47.                                       </div>
    48.                                       <div style="width:100px; height:593px; float:left;">
    49.                                         <ul class="content_yuzhou02" style="width:100px; height:593px; float:left;">
    50.                       <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -100px 0;"></li>
    51.                                           <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -100px 0;"></li>
    52.                                           <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -100px 0;"></li>
    53.                                         </ul>
    54.                                       </div>
    55.                                       <div style="width:100px; height:593px; float:left;">
    56.                                         <ul class="content_yuzhou03" style="width:100px; height:593px; float:left;">
    57.                       <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -200px 0;"></li>
    58.                                           <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -200px 0;"></li>
    59.                                           <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -200px 0;"></li>
    60.                                         </ul>
    61.                                       </div>
    62.                      
    63.                                       <div style="width:100px; height:593px; float:left;">
    64.                                         <ul class="content_yuzhou04" style="width:100px; height:593px; float:left;">
    65.                       <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -300px 0;">
    66.                       </li>
    67.                                           <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -300px 0;"></li>
    68.                                           <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -300px 0;"></li>
    69.                                         </ul>
    70.                                       </div>
    71.                                       <div style="width:100px; height:593px; float:left;">
    72.                                         <ul class="content_yuzhou05" style="width:100px; height:593px; float:left;">
    73.                       <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -400px 0;"></li>
    74.                                           <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -400px 0;"></li>
    75.                                           <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -400px 0;"></li>
    76.                                         </ul>
    77.                                       </div>
    78.                                       <div style="width:100px; height:593px; float:left;">
    79.                                         <ul class="content_yuzhou06" style="width:100px; height:593px; float:left;">
    80.                       <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -500px 0;"></li>
    81.                                           <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -500px 0;"></li>
    82.                                           <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -500px 0;"></li>
    83.                                         </ul>
    84.                                       </div>
    85.                                       <div style="width:100px; height:593px; float:left;">
    86.                                         <ul class="content_yuzhou07" style="width:100px; height:593px; float:left;">
    87.                       <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -600px 0;"></li>
    88.                                           <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -600px 0;"></li>
    89.                                           <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -600px 0;"></li>
    90.                                         </ul>
    91.                                       </div>
    92.                      
    93.                                       <div style="width:100px; height:593px; float:left;">
    94.                                         <ul class="content_yuzhou08" style="width:100px; height:593px; float:left;">
    95.                       <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -700px 0;"></li>
    96.                                           <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -700px 0;"></li>
    97.                                           <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -700px 0;"></li>
    98.                                         </ul>
    99.                                       </div>
    100.                                       <div style="width:100px; height:593px; float:left;">
    101.                                         <ul class="content_yuzhou09" style="width:100px; height:593px; float:left;">
    102.                       <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -800px 0;"></li>
    103.                                           <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -800px 0;"></li>
    104.                                           <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -800px 0;"></li>
    105.                                         </ul>
    106.                                       </div>
    107.                                       <div style="width:100px; height:593px; float:left;">
    108.                                         <ul class="content_yuzhou10" style="width:100px; height:593px; float:left;">
    109.                       <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -900px 0;"></li>
    110.                                           <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -900px 0;"></li>
    111.                                           <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -900px 0;"></li>
    112.                                         </ul>
    113.                                       </div>
    114.                      
    115.                                       <div style="width:100px; height:593px; float:left;">
    116.                                         <ul class="content_yuzhou11" style="width:100px; height:593px; float:left;">
    117.                       <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -1000px 0;"></li>
    118.                                           <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -1000px 0;"></li>
    119.                                           <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -1000px 0;"></li>
    120.                                         </ul>
    121.                                       </div>
    122.                                       <div style="width:100px; height:593px; float:left;">
    123.                                         <ul class="content_yuzhou12" style="width:100px; height:593px; float:left;">
    124.                       <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -1100px 0;"></li>
    125.                                           <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -1100px 0;"></li>
    126.                                           <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -1100px 0;"></li>
    127.                                         </ul>
    128.                                       </div>
    129.                                       <div style="width:100px; height:593px; float:left;">
    130.                                         <ul class="content_yuzhou13" style="width:100px; height:593px; float:left;">
    131.                       <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -1200px 0;">
    132.                       </li>
    133.                                           <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -1200px 0;"></li>
    134.                                           <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -1200px 0;"></li>
    135.                                         </ul>
    136.                                       </div>
    137.                                       <div style="width:100px; height:593px; float:left;">
    138.                                         <ul class="content_yuzhou14" style="width:100px; height:593px; float:left;">
    139.                       <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -1300px 0;"></li>
    140.                                           <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -1300px 0;"></li>
    141.                                           <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -1300px 0;"></li>
    142.                                         </ul>
    143.                                       </div>
    144.                      
    145.                                       <div style="width:100px; height:593px; float:left;">
    146.                                         <ul class="content_yuzhou15" style="width:100px; height:593px; float:left;">
    147.                       <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -1400px 0;"></li>
    148.                                           <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -1400px 0;"></li>
    149.                                           <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -1400px 0;"></li>
    150.                                         </ul>
    151.                                       </div>
    152.                                       <div style="width:100px; height:593px; float:left;">
    153.                                         <ul class="content_yuzhou16" style="width:100px; height:593px; float:left;">
    154.                       <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -1500px 0;"></li>
    155.                                           <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -1500px 0;"></li>
    156.                                           <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -1500px 0;"></li>
    157.                                         </ul>
    158.                                       </div>
    159.                                       <ul class="nv_yuzhou" style="display:none;">
    160.                                         <li></li>
    161.                                         <li></li>
    162.                                       </ul>
    163.                                       <!-- 上下页按钮 -->
    164.                                       <div class="footer-more-trigger prev_yuzhou" style="width:50px; height:50px; background:#f00; border:0; padding:0; left:275px; top:420px; z-index:10; cursor:pointer; background:url(http://img02.taobaocdn.com/imgextra/i2/41251343/T2Sq5HXs4XXXXXXXXX_!!41251343.png) 0 0 transparent;"></div>
    165.                                       <div class="footer-more-trigger next_yuzhou" style="width:50px; height:50px; background:#f00; border:0; padding:0; left:1275px; top:420px; z-index:10; cursor:pointer;background:url(http://img02.taobaocdn.com/imgextra/i2/41251343/T2Sq5HXs4XXXXXXXXX_!!41251343.png) -50px 0 transparent;"></div>
    166.                                       <!-- //上下页按钮 end -->
    167.                                     </div>
    168.                                   </div>
    169.                                 </div>
    170.                               </div>
    171.                             </div>
    172.                           </div>
    173.                         </div>
    174.                       </div>
    175.                     </div>
    176.            
    177.                   </div>
    178.                 </div>
    179.               </div>
    180.             </div>
    181.           </div>
    182.       
    183.         </div>
    184.       </div>
    185.    
    186. <!--播放器-->
    187. <div class="J_TWidget footer-more-trigger" data-widget-type="Carousel" data-widget-config="{'effect':'scrollx','contentCls':'content_yuzhou1219','navCls':'nav_yuzhou1219','autoplay':true,'activeIndex':1,'activeTriggerCls':'.tshop-pbsm-shop-nav-ch','interval':0.1,'duration':0.1}" style="width:300px; height:338px; border:0; padding:0; top:20px; left:325px; z-index:19;">
    188.   <div style="display:none;">
    189.   <ul class="content_yuzhou1219">
    190.     <li style="width:950px; height:10px;"></li>
    191.   </ul>
    192.   </div>
    193.   <ul class="nav_yuzhou1219">
    194.     <li>
    195.   <!--播放器内部内容-->
    196. <div class="J_TWidget footer-more-trigger player_yz" data-widget-type="Carousel" data-widget-config="{'contentCls':'content_player_yz','navCls':'nav_player_yz','autoplay':false,'effect':'none','activeTriggerCls':'active_player_yz','triggerType':'click'}" style="width:300px; height:338px; border:0; padding:0; top:auto; left:auto; overflow:hidden;">
    197.   <div style="height:165px;">
    198.   <ul class="content_player_yz footer-more-trigger" style="width:300px; height:165px; border:0; padding:0; top:0; left:0; overflow:hidden;">
    199.     <!--let it go-->
    200.     <li style="width:300px; height:165px;">
    201.     <div class="footer-more-trigger" style="width:300px; height:165px; border:0; padding:0; top:auto; left:auto;">
    202.        <div class="footer-more-trigger" style="width:380px; height:225px; border:0; padding:0; top:-65px; left:-50px;">
    203.           <embed src="[flash]http://cloud.video.taobao.com//play/u/41251343/p/1/e/1/t/7/11047481.swf[/flash]" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="400" height="285" wmode="transparent"></embed>
    204.       </div>
    205.     </div>
    206.   </li>
    207.   <!--//let it go end-->  
    208.     <!--御龙吟-->
    209.     <li style="width:300px; height:165px; display:none;">
    210.     <div class="footer-more-trigger" style="width:300px; height:165px; border:0; padding:0; top:auto; left:auto;">
    211.        <div class="footer-more-trigger" style="width:380px; height:225px; border:0; padding:0; top:-45px; left:-60px;">
    212.           <embed src="[flash]http://cloud.video.taobao.com//play/u/41251343/p/1/e/1/t/7/11029915.swf[/flash]" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="420" height="255" wmode="transparent"></embed>
    213.       </div>
    214.     </div>
    215.   </li>
    216.   <!--//御龙吟 end-->
    217.   
    218.   <!--自由-->
    219.     <li style="width:300px; height:165px; display:none;">
    220.     <div class="footer-more-trigger" style="width:300px; height:165px; border:0; padding:0; top:auto; left:auto;">
    221.        <div class="footer-more-trigger" style="width:380px; height:225px; border:0; padding:0; top:-45px; left:-60px;">
    222.           <embed src="[flash]http://cloud.video.taobao.com//play/u/41251343/p/1/e/1/t/7/11029340.swf[/flash]" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="420" height="255" wmode="transparent"></embed>
    223.       </div>
    224.     </div>
    225.   </li>
    226.   <!--//自由 end-->
    227.   </ul>
    228.   </div>
    229.   <ul class="nav_player_yz">
    230.     <li class="no_active active_player_yz" style="width:300px; height:50px;border-bottom:1px solid #e5e5e5; color:#555;">
    231.     <div style="width:278px; height:20px; padding-left:22px; padding-top:5px; line-height:20px;"><span>歌名:Let it go</span><span style="color:#999; padding-left:10px;">电影《魔雪奇缘》主题曲</span></div>
    232.     <div style="width:278px; height:20px; padding-left:22px; padding-bottom:5px; line-height:20px;">歌手:Demi Lovato</div>
    233.   </li>
    234.     <li class="no_active" style="width:300px; height:50px;border-bottom:1px solid #e5e5e5; color:#555;">
    235.     <div style="width:278px; height:20px; padding-left:22px; padding-top:5px; line-height:20px;"><span>歌名:御龙吟</span><span style="color:#999; padding-left:10px;">《御龙在天》宣传MV</span></div>
    236.     <div style="width:278px; height:20px; padding-left:22px; padding-bottom:5px; line-height:20px;">歌手:殷瑜琼</div>
    237.   </li>
    238.   <li class="no_active" style="width:300px; height:50px;border-bottom:1px solid #e5e5e5; color:#555;">
    239.     <div style="width:278px; height:20px; padding-left:22px; padding-top:5px; line-height:20px;"><span>歌名:自由</span><span style="color:#999; padding-left:10px;">2005丝绸之旅音乐会</span></div>
    240.     <div style="width:278px; height:20px; padding-left:22px; padding-bottom:5px; line-height:20px;">演奏:女子十二乐坊</div>
    241.   </li>
    242.   </ul>
    243.   <div style="width:278px; height:20px; background:#cf2440; line-height:20px; padding-left:22px;"><a href="http://bangpai.taobao.com/group/14799823.htm?spm=a1z10.1.w5001-3822421422.7.anEtAB&scene=taobao_shop" target="_blank" style="color:#fff;">双击视频,按键盘“↓”键减小音量,“→”快进!!!</a></div>
    244. </div>
    245.   <!--//播放器内部内容 end-->
    246.     </li>
    247. </ul>
    248. </div>
    249. </div>
    250. <!--// 播放器 end-->
    251.    
    252.     </div>
    253.   </div>
    254. </div>
    复制代码




    评分

    参与人数 3美工币 +60 收起 理由
    bdk236 + 20 很给力!
    い☆ve承諾 + 20 很给力!
    天天乐克 + 20 很给力!

    查看全部评分

  • TA的每日心情
    抱抱
    2016-8-19 09:35
  • 签到天数: 123 天

    连续签到: 2 天

    [LV.7]炉火纯青

    1

    主题

    77

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    17451

    最佳新人

    发表于 2014-3-4 10:58:19 | 显示全部楼层
    看这很牛逼啊!
  • TA的每日心情

    2017-3-20 14:08
  • 签到天数: 1205 天

    连续签到: 1 天

    [LV.10]功行圆满

    60

    主题

    6128

    帖子

    53万

    积分

    版主

    阅读权限: 100

    黄皮很酸吗? 糖糖很甜吗? 亲 我一下犯法吗?

    Rank: 12Rank: 12Rank: 12

    积分
    539555

    最佳新人热心会员宣传达人推广达人活跃会员优秀版主

    QQ
    发表于 2014-3-4 11:01:27 | 显示全部楼层
    渔舟能收我徒吗?
    >>>>>>挖掘淘宝Bug与代应用:364384606<<<<<<
  • TA的每日心情
    无奈
    2016-6-29 12:48
  • 签到天数: 87 天

    连续签到: 1 天

    [LV.6]渐入佳境

    22

    主题

    214

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    17045

    最佳新人热心会员

    发表于 2014-3-4 11:14:24 | 显示全部楼层
    同楼上的,但是我是菜鸟~

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    思考
    2016-7-26 11:26
  • 签到天数: 87 天

    连续签到: 1 天

    [LV.6]渐入佳境

    2

    主题

    81

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    23336

    发表于 2014-3-4 11:18:49 | 显示全部楼层
    好牛逼。

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    不爽
    2013-8-19 20:42
  • 签到天数: 8 天

    连续签到: 1 天

    [LV.3]武林新秀

    43

    主题

    2259

    帖子

    11万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    117274

    活跃会员热心会员

    发表于 2014-3-4 11:27:08 | 显示全部楼层

    同上啊
  • TA的每日心情
    抱抱
    6 天前
  • 签到天数: 422 天

    连续签到: 1 天

    [LV.9]已臻大成

    11

    主题

    174

    帖子

    8万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    84551

    最佳新人宣传达人热心会员

    发表于 2014-3-4 11:29:41 | 显示全部楼层
    渔舟求拜师啊

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    抱抱
    2017-2-8 14:00
  • 签到天数: 125 天

    连续签到: 1 天

    [LV.7]炉火纯青

    21

    主题

    239

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    39754

    最佳新人热心会员

    发表于 2014-3-4 11:32:41 | 显示全部楼层
    渔舟出品 ,必属精品 期待很久了,我顶!!!!!!!!!!!!!!!!!!!!!

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    大哭
    2017-3-7 14:43
  • 签到天数: 416 天

    连续签到: 1 天

    [LV.9]已臻大成

    63

    主题

    355

    帖子

    10万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    101162

    发表于 2014-3-4 11:44:19 | 显示全部楼层
    你为何这么吊!!!!!!!
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|Archiver|手机版|坛主个人微信公众号|粤公网安备44060502000322号|淘宝美工论坛 ( 桂ICP备12007265号-8 )  

    GMT+8, 2017-4-30 05:02 , Processed in 0.141938 second(s), 27 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表