StackSlider:一个有趣的3D JQuery图片幻灯片

StackSlider:一个有趣的3D JQuery图片幻灯片
 点击预览  点击下载

StackSlider is a highly experimental jQuery image slider plugin that explores a different and fun viewing concept for thumbnails, utilizing CSS 3D transforms and perspective. The idea is to navigate through two piles of images where the transition resembles an item being lifted off from the top of the stack and moved/rotated to the center of the container to be viewed. The previously viewed image falls on the opposite stack.

stackslider是一个高度实验时的图像滑块插件,探讨了不同的和有趣的概念,利用网页缩略图查看,3D变换和透视。这个想法是浏览堆图像的过渡,类似于一个项目被取消从堆栈的顶部和移动/旋转容器的中心被视。先前被观看的图像落在对面的堆栈。

Please note that this is highly experimental and not fully tested. And obviously the 3D effect just works in supporting browsers. The fallback is simply showing and hiding the images when navigating. The effect looks smoothest in WebKit browsers.

需要注意的是这是个实验性的插件,3D效果只支持部分浏览器,请使用webkit内核浏览器查看。

如何使用插件:

  1. <ul id="st-stack" class="st-stack-raw"> 
  2.     <li> 
  3.         <div class="st-item"> 
  4.             <a href="http://drbl.in/fgQV"> 
  5.                 <img src="images/1.jpg" /> 
  6.             </a> 
  7.         </div> 
  8.         <div class="st-title"> 
  9.             <h2>Graverobber</h2><h3>by Isaac Montemayor</h3> 
  10.         </div> 
  11.     </li> 
  12.     <li> <!-- ... --> </li> 
  13.     <li> <!-- ... --> </li> 
  14.     <li> <!-- ... --> </li> 
  15.     <!-- ... --> 
  16. </ul> 

调用:

  1. $( '#st-stack' ).stackslider(); 

转载请注明:代码家园 » StackSlider:一个有趣的3D JQuery图片幻灯片

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)