jQuery和CSS3炫酷响应式支持触摸屏的3D旋转木马特效

发表于2015-07-31
评论0 499浏览

想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯游戏学院游戏程序行业精英群

711501594
  摘要: jquery-flipster是一款效果非常炫酷的响应式支持触摸屏的3D旋转木马特效jQuery插件。该旋转木马特效基于CSS3 3D transform制作,效果和CoverFlow类似。该插件是响应式的,旋转木马会自动居中显示。 ...
  简要教程
  jquery-flipster是一款效果非常炫酷的响应式支持触摸屏的3D旋转木马特效jQuery插件。该旋转木马特效基于CSS3 3D transform制作,效果和CoverFlow类似。该插件是响应式的,旋转木马会自动居中显示。并且它支持移动手机的触摸屏。如果浏览器不支持CSS3 3D transform,该旋转木马会自动回退显示为平面图片。

  可以通过键盘的方向键,鼠标和前后导航按钮来控制该旋转木马的动画。

5.jpg

  使用方法
  使用该旋转木马插件需要引入jQuery和flipster.js、flipster.css文件。
  1. <link rel="stylesheet" href="css/flipster.css">
  2. <noxss src="jquery/1.10.2/jquery.min.js"></script>
  3. <noxss src="/js/jquery.flipster.js"></script>

  HTML结构
  该旋转木马特效使用一个<div>来包裹一个图片无序列表。
  1. <div class="flipster">
  2. <ul>
  3. <li><img src="" alt="" /></li>
  4. ...
  5. </ul>
  6. </div>

  初始化插件
  1. $(function(){ $('.flipster').flipster(); });

  配置参数
  1. $(function(){
  2. $('.flipster').flipster({
  3. itemContainer: 'ul', // Container for the flippin' items.
  4. itemSelector: 'li', // Selector for children of itemContainer to flip
  5. style: 'coverflow', // Switch between 'coverflow' or 'carousel' display styles
  6. start: 'center', // Starting item. Set to 0 to start at the first, 'center' to start in the middle or the index of the item you want to start with.

  7. enableKeyboard: true, // Enable left/right arrow navigation
  8. enableMousewheel: true, // Enable scrollwheel navigation (up = left, down = right)
  9. enableTouch: true, // Enable swipe navigation for touch devices

  10. enableNav: false, // If true, flipster will insert an unordered list of the slides
  11. enableNavButtons: false, // If true, flipster will insert Previous / Next buttons

  12. onItemSwitch: function(){}, // Callback function when items are switches
  13. }
  14. });

  itemContainer:旋转木马元素项容器,默认为ul。

  itemSelector:itemContainer的子元素,默认为li。

  style:在“coverflow”和“carousel”模式之间切换,默认为“coverflow”模式。

  start:设置旋转木马的开始项并使它居中显示。

  enableKeyboard:是否允许使用左右箭头按键来导航旋转木马,默认为true。

  enableMousewheel:是否允许使用鼠标滚动来导航旋转木马,默认为true。

  enableTouch:是否允许触摸滑动来导航旋转木马,默认为true。

  enableNav:如果设置为true,插件会插入一个项目类别和标题的无序列表来制作导航效果。默认为false。

  enableNavButtons:如果设置为true,插件会插入“Previous”和“Next”链接来前后导航旋转木马。

  回调函数
  onItemSwitch:当旋转木马进行切换时被调用。

  高级应用
  导航
  该旋转木马插件可以为每一个旋转木马项创建一个链接的无序列表。需要在每一个<li>元素上设置ID和title属性,然后设置enableNav: true。例如:
  1. <div class="flipster">
  2. <ul class="flip-items">
  3. <li id="Item-1" title="Item 1 Title">
  4. <img src="" alt="" />
  5. </li>
  6. <li id="Item-2" title="Item 2 Title">
  7. <img src="" />
  8. </li>
  9. ...
  10. </ul>
  11. </div>

  将会输出下面的代码:
  1. <ul class="flipster-nav">
  2. <li class="flip-nav-item no-category"><a href="#Item-1" class="flip-nav-item-link">Item 1 Title</a></li>
  3. <li class="flip-nav-item no-category"><a href="#Item-2" class="flip-nav-item-link">Item 2 Title</a></li>...
  4. </ul>

  分类
  导航列表也可以进行类别分组。需要在每一个<li>元素上设置data-flip-category属性以及ID和title属性,然后设置enableNav: true。例如:
  1. <div class="flipster">
  2. <ul class="flip-items">
  3. <li id="Item-1" title="Item 1 Title" data-flip-category="Category 1">
  4. <img src="" alt="" />
  5. </li>
  6. <li id="Item-2" title="Item 2 Title" data-flip-category="Category 1">
  7. <img src="" />
  8. </li>
  9. <li id="Item-3" title="Item 3 Title" data-flip-category="Category 2">
  10. <img src="" />
  11. </li>
  12. <li id="Item-4" title="Item 4 Title" data-flip-category="Category 2">
  13. <img src="" />
  14. </li>
  15. <li id="Item-5" title="Item 5 Title">
  16. <img src="" />
  17. </li>
  18. </ul>
  19. </div>

  将会输出下面的代码:
  1. <ul class="flipster-nav">
  2. <li class="flip-nav-category">
  3. <a href="#" class="flip-nav-category-link" data-flip-category="Category 1">Category 1</a>
  4. <ul class="flip-nav-items">
  5. <li class="flip-nav-item"><a href="#Item-1" class="flip-nav-item-link">Item 1</a></li>
  6. <li class="flip-nav-item"><a href="#Item-2" class="flip-nav-item-link">Item 2</a></li>
  7. </ul>
  8. </li>
  9. <li class="flip-nav-category">
  10. <a href="#" class="flip-nav-category-link" data-flip-category="Category 2">Category 2</a>
  11. <ul class="flip-nav-items">
  12. <li class="flip-nav-item"><a href="#Item-3" class="flip-nav-item-link">Item 3</a></li>
  13. <li class="flip-nav-item"><a href="#Item-4" class="flip-nav-item-link">Item 4</a></li>
  14. </ul>
  15. </li>
  16. <li class="flip-nav-item no-category">
  17. <a href="#Item-5" class="flip-nav-item-link">Item 5 Title</a>
  18. </li>
  19. </ul>

  浏览器兼容

  已经测试的浏览器:
  •   Chrome (latest)
  •   Safari & Mobile Safari (latest)
  •   Firefox (latest) (no mousewheel, no box reflections)
  •   IE 10 (no mousewheel, no box reflections)

  未经测试的浏览器:
  •   IE 8 & 9 (no 3D transforms, 'compatibility mode')
  •   IE <= 7
  •   Android browsers
  •   Opera
 

原文链接

著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引

游戏学院公众号二维码
腾讯游戏学院
微信公众号

提供更专业的游戏知识学习平台