简介

官方介绍：stroll.js,beacuse it scrolls,and trolls.(翻译：不仅滚动，而且旋转)。 ps:确实如此。

---

下载

先贴一个GitHub下载链接：stroll.js

---

引入文件

<link rel="stylesheet" href="css/stroll.css"> <script src="js/stroll.min.js"></script>

---

创建带class的ul

<ul class="cards"> <li>001</li> <li>002</li> <li>003</li> </ul>

class 参数：grow, cards, curl, wave, flip, fly, fly-simplified, fly-reverse, helix, fan, papercut, twirl

---

css控制外观

ul{ position: relative; padding: 0; height: 500px; width: 300px; border: 2px solid; overflow-y: scroll; overflow-x: hidden; }

overflow-x是为了旋转时避免出现横向的滚动条（重要！）； padding是为了消除边框和内容之间的默认距离； 一定要设置固定高度

li{ list-style: none; padding: 10px; } ul li:nth-child(odd){ background-color: #aaa; }

斑马状的内容，增强视觉效果

---

函数绑定

<script> stroll.bind( 'ul' );//jquery选择器可按照实际情况来写 </script>

---

总结

列表的滑动效果还是非常酷炫的，提供的可选效果也非常多。 不过，貌似可调节的参数不太多，无法精确控制效果呈现。