首页>>焦点图>>多方式切换的焦点图，支持图片，文字，视频播放(2015-01-11)

多方式切换的焦点图，支持图片，文字，视频播放

多方式切换的焦点图，支持图片，文字，视频播放
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div style="overflow:hidden; width:960px; margin: 100px auto; padding:0 20px;">   
  2.                 <div class="pix_diapo">  
  3.   
  4.                     <div data-thumb="images/thumbs/megamind1048.jpg">  
  5.                         <img src="images/slides/megamind1048.jpg">  
  6.                         <div class="caption elemHover fromLeft">  
  7.                             This is a simple sliding image with caption. You can have more than one caption and decide the layout of the caption via css.  
  8.                         </div>  
  9.                     </div>  
  10.                       
  11.                     <div data-thumb="images/thumbs/megamind_07.jpg">  
  12.                         <img src="images/slides/megamind_07.jpg">   
  13.                         <div class="caption elemHover fromRight" style="bottom:65px; padding-bottom:5px; color:#ff0; text-transform:uppercase">  
  14.                             Here you can see two captions.  
  15.                         </div>  
  16.                         <div class="caption elemHover fromLeft" style="padding-top:5px;">  
  17.                             The first are loaded immediately before than the second one  
  18.                         </div>  
  19.                     </div>  
  20.                       
  21.                     <div data-thumb="images/thumbs/wall-e.jpg" data-time="7000">  
  22.                         <img src="images/slides/wall-e.jpg">  
  23.                         <div class="elemHover caption fromLeft" style="bottom:70px; width:auto; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px;">  
  24.                             You can also get the same effect as the caption with:  
  25.                         </div>  
  26.                         <div class="elemHover button fromTop" data-easing="easeOutExpo" style="left:388px; bottom:78px;">  
  27.                             A button  
  28.                         </div>  
  29.                         <div class="elemHover button button2 fromBottom" data-easing="easeOutExpo" style="left:512px; bottom:78px;">  
  30.                             Or two buttons  
  31.                         </div>  
  32.                         <div class="elemHover fadeIn" style="left:600px; bottom:auto; top:0; padding-top:50px; color:#ff0; font-size:13px; line-height:20px; width:auto; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; background:url(images/demo/arrow_caption.png) no-repeat 230px 30px">  
  33.                             Or any other html element...<br>  
  34.                             and you can decide the transition time of any slide  
  35.                         </div>  
  36.                     </div>  
  37.                       
  38.                     <div data-thumb="images/thumbs/up-official-trailer-fake.jpg">  
  39.                         <iframe width="940" height="470" src="http://www.youtube.com/embed/qas5lWp7_R0?wmode=transparent&autoplay=1" data-fake="images/slides/up-official-trailer-fake.jpg" frameborder="0" allowfullscreen></iframe>  
  40.                         <div class="elemHover caption fromLeft elemToHide" style="bottom: 350px; width:auto; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; left:0">  
  41.                             You can also display videos, but it requires a "fake image"... read the documentation please  
  42.                         </div>  
  43.                     </div>  
  44.                       
  45.                     <div data-thumb="images/thumbs/big_buck_bunny.jpg" data-time="7000">  
  46.                         <div style="position:absolute; top:0; left:0; width:900px; height:430px; padding:20px; background:#fff; color:#222;">  
  47.                             <div style="float:left; width:300px;">  
  48.                                 <p><br><br>You can display any html element directly in the slider, but pay attention, with many elements the transition effect could be slowed.<br>  
  49.                                 In this case you can see a Vimeo video and a price table</p>  
  50.                                 <iframe src="http://player.vimeo.com/video/1084537?title=0&byline=0&portrait=0&color=f0bc00&autoplay=1" data-fake="images/slides/big_buck_bunny.jpg" width="300" height="169" frameborder="0"></iframe>  
  51.                             </div>  
  52.                             <div class="price_table"><div>  
  53.                                 <div class="price_column highlighted" style="top:0; left:190px; height:387px; background:#fff; -moz-box-shadow: 0 1px 4px #666; -webkit-box-shadow: 0 1px 4px #666; box-shadow: 0 1px 4px #666;"><div>  
  54.                                 </div></div><!-- .price_column -->   
  55.                                 <div class="price_column" style="top:0; left:0; height:383px; background:#ddd; -moz-box-shadow: 0 1px 4px #666; -webkit-box-shadow: 0 1px 4px #666; box-shadow: 0 1px 4px #666;"><div>   
  56.                                 </div></div><!-- .price_column -->   
  57.                                 <div class="price_column" style="top:0; left:380px; height:383px; background:#ddd; -moz-box-shadow: 0 1px 4px #666; -webkit-box-shadow: 0 1px 4px #666; box-shadow: 0 1px 4px #666;"><div>  
  58.                                 </div></div><!-- .price_column -->  
  59.                                 <div class="price_column highlighted fadeIn" style="top:0; left:190px;"><div>  
  60.                                     <div class="price_title">Standard</div><!-- .price_title -->   
  61.                                     <div class="price_price">$9/mo.</div><!-- .price_price -->   
  62.                                     <div class="price_explanation">And as the day advanced and the engine drivers</div><!-- .price_explanation -->   
  63.                                     <div class="pix_check">Check sign</div><!-- .pix_check -->   
  64.                                     <div class="pix_check">Check sign</div><!-- .pix_check -->   
  65.                                     <div class="pix_check">Check sign</div><!-- .pix_check -->   
  66.                                     <div class="pix_error">Error sign</div><!-- .pix_error -->   
  67.                                     <div>  
  68.                                         <a class="button button3" href="#">Purchase</a>  
  69.                                     </div>  
  70.                                 </div></div><!-- .price_column -->   
  71.                                 <div class="price_column fromTop" style="top:0; left:0"><div>   
  72.                                     <div class="price_title">Basic</div><!-- .price_title -->   
  73.                                     <div class="price_price">Free</div><!-- .price_price -->   
  74.                                     <div class="price_explanation">And as the day advanced and the engine drivers</div><!-- .price_explanation -->   
  75.                                     <div class="pix_check">Check sign</div><!-- .pix_check -->   
  76.                                     <div class="pix_error">Error sign</div><!-- .pix_error -->   
  77.                                     <div class="pix_check">Check sign</div><!-- .pix_check -->   
  78.                                     <div class="pix_error">Error sign</div><!-- .pix_error -->   
  79.                                     <div>  
  80.                                         <a class="button" href="#">Purchase</a>  
  81.                                     </div>   
  82.                                 </div></div><!-- .price_column -->   
  83.                                 <div class="price_column fromBottom" style="top:0; left:380px;"><div>  
  84.                                     <div class="price_title">Professional</div><!-- .price_title -->   
  85.                                     <div class="price_price">$19/mo.</div><!-- .price_price -->   
  86.                                     <div class="price_explanation">And as the day advanced and the engine drivers</div><!-- .price_explanation -->   
  87.                                     <div class="pix_check">Check sign</div><!-- .pix_check -->   
  88.                                     <div class="pix_check">Check sign</div><!-- .pix_check -->   
  89.                                     <div class="pix_check">Check sign</div><!-- .pix_check -->   
  90.                                     <div class="pix_check">Check sign</div><!-- .pix_check -->   
  91.                                     <div>  
  92.                                         <a class="button" href="#">Purchase</a>  
  93.                                     </div>   
  94.                                 </div></div><!-- .price_column -->   
  95.                             </div></div><!-- price_table -->  
  96.                         </div>  
  97.                     </div>  
  98.                       
  99.                       
  100.                     <div data-thumb="images/thumbs/ratatouille2.jpg">  
  101.                         <img src="images/slides/ratatouille2.jpg">  
  102.                     </div>  
  103.                       
  104.                </div><!-- #pix_diapo -->  
  105.                   
  106.         </div>  

 


原文地址:http://www.freejs.net/article_jiaodiantu_455.html