[Jquery][分享]简单实用滚动插件Roundabout介绍 - 喵宅苑 MewoGarden × 技术宅社区II

[i=s] 本帖最后由至尊麻辣螃海于 2013-8-20 11:07 编辑 Roundabout是一款非常实用而且强大的插件，这款插件可以在页面上生成一个强大的旋转效果，能够将一组静态HTML元素转换成可以灵活定制具有类似于转盘旋转效果的交互区域。有多种旋转形状可供选择，而且使用起来十分容易上手，但是经过个人实践，CSS+DIV和Jquery的初学者使用起来可能会遇到一定的麻烦（我也是初学者，已经被虐），这个分享的主要内容基本上就是把官网上面的官方说明翻译一下能够让更多人看明白与理解，然后使更多人能享受到这款强大的插件。这里是官网地址：http://fredhq.com/projects/roundabout/ 这里是插件在线演示地址：http://www.gbtags.com/gb/demoviewer/790/b2607beb-0af8-4af2-9576-efd23eff9d07/index.htm.htm 好的，正式开始介绍了：首先，你需要一个普通的HTML页面，要运行Roundabout需要Jquery框架在<head></head>标签之间输入以下代码你可以使用本地的Jquery: [mw_shl_code=html,true]<script language="javascript" src="../js/jquery-1.10.2.min.js"></script>[/mw_shl_code] 也可以从多个公共服务器中引用（但是如果电脑没有联网的话就没有效果了）： [mw_shl_code=html,true]<script type="text/javascript" src="http://ajax.googleapis. com/ajax/libs/jquery/1.8/jquery.min.js"></script>[/mw_shl_code] 然后需要载入Roundabout插件： [mw_shl_code=html,true]<script language="javascript" src="../js/jquery.roundabout-1.0.min.js"></script>[/mw_shl_code] 下载地址：https://github.com/fredhq/roundabout/zipball/v2.4.2 这样最基本的准备就完成了，接下来是html代码部分，Roundabout插件主要是通过<ul>标签和<li>标签来作用的，在<body></body>部分输入你需要旋转的列表： [mw_shl_code=html,true] <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> [/mw_shl_code] <li>标签的部分就是之后旋转效果里面旋转的主要部分了，这里可以放各种静态HTML元素，比如图片文字。 Script： [mw_shl_code=javascript,true] <script> $(document).ready(function() { $('ul').roundabout(); }); </script> [/mw_shl_code] 这里就是调用Roundabout插件的代码了，这里默认的选择器是‘ul’，如果在页面中有其他带<ul>标签的元素的话，可以在需要变成滚动特效的ul标签上加上一个ID或者Class，然后把选择器改为对应的ID或者Class就好了。为了使Roundabout运行地更好以及表现地更漂亮，还需要一些CSS代码： [mw_shl_code=css,true] <style> .roundabout-holder {/*这个是整个旋转特效的容器，height和width属性可以调整旋转特效的范围*/ list-style: none; padding: 0; margin: 0; height: 5em; width: 5em; } .roundabout-moveable-item {/*这个是每个旋转元素的属性*/ height: 4em; width: 4em; cursor: pointer; background-color: #ccc; border: 1px solid #999; } .roundabout-in-focus { cursor: auto; } </style> [/mw_shl_code] 接下来一个简单的Roundabout特效就做好了： [attach]235298[/attach] 稍微修改一下CSS属性，就能变成比较好的效果了： [attach]235301[/attach] 进阶：在javascript代码里加上这样一句： [mw_shl_code=javascript,true] <script> $(document).ready(function() { $('ul').roundabout( { btnNext: ".next" } ); }); </script> [/mw_shl_code] 在<body></body>里面添加一个连接： [mw_shl_code=html,true]<a href="#" class="next">Next</a>[/mw_shl_code] 这样就做成一个可以控制元素旋转的按钮了： [attach]235306[/attach] 通过这两个插件还能实现拖拽功能： [mw_shl_code=html,true]<script src="jquery.event.drag-2.0.js"></script> <script src="jquery.event.drop-2.0.js"></script>[/mw_shl_code] [mw_shl_code=javascript,true]<script> $(document).ready(function() { $('ul').roundabout({ enableDrag: true }); }); </script>[/mw_shl_code] 下载地址： Drag：https://github.com/downloads/threedubmedia/jquery.threedubmedia/jquery.event.drag-2.2.zip Drop：https://github.com/downloads/threedubmedia/jquery.threedubmedia/jquery.event.drop-2.2.zip 如果觉得一般的滚动特效不够好的话还有很多滚动款式能够选择，这里需要一个“jquery.roundabout-shapes.js”文件，下载地址：https://github.com/fredhq/roundabout-shapes/zipball/master [mw_shl_code=html,true]<script src="jquery.roundabout-shapes.js"></script[/mw_shl_code] 然后这样就可以改变滚动样式啦： [mw_shl_code=javascript,true]<script> $(document).ready(function() { $('ul').roundabout({ shape: "teardrop" }); }); </script[/mw_shl_code][attach]235318[/attach] 这里是滚动样式演示：http://fredhq.com/projects/roundabout-shapes 简单的介绍就到这里啦，这些就是一些简答的使用技巧，Roundabout插件还有更多强大的功能等着大家去发掘，我也是在学习中的小透明，发一点心得和大家共享，以后还会发类似的帖子，期待大家的支持和鼓励。源文件下载： [hide=d30][attach]235324[/attach][/hide]

该贴已经同步到至尊麻辣螃海的微博

喵宅苑 MewoGarden × 技术宅社区II | Z站 Z Station 棒棒哒纯文字二次元技术社区

正文

回复