jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016-09-20 10:42
861 查看
这里分享一款回旋滚动效果,先上效果图:
具体代码如下:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>jquery-roundabout</title> <style type="text/css"> *{padding:0;margin:0;} body{font:24px tahoma;} ul{list-style:none;margin:100px auto 0;width:500px;height:200px;} li{line-height:200px;height:200px;width:300px;background:#ccc;text-align:center;cursor:pointer;} .roundabout-in-focus{cursor:default;} </style> </head> <body> <ul class="roundabout"> <li>Block 1</li> <li>Block 2</li> <li>Block 3</li> <li>Block 4</li> <li>Block 5</li> </ul> </body> </html> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/jquery.roundabout.min.js"></script> <script type="text/javascript"> $(function(){ $('.roundabout').roundabout(); }); </script>
至于 roundabout.js 的代码可以去官网上下载,这里就不写了。
官网地址为:http://fredhq.com/projects/roundabout
完整实例代码点击此处本站下载。
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery窗口操作技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
- 六款帮助你实现惊艳视差滚动效果的jQuery插件
- jQuery模拟Marquee实现无缝滚动效果完整实例
- jQuery实现的自定义滚动条实例详解
- jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
- jQuery实现的多张图无缝滚动效果【测试可用】
- JQuery插件iScroll实现下拉刷新,滚动翻页特效
- js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
- jQuery创建平滑的页面滚动(顶部或底部)
- JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
- 基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
- jquery无缝向上滚动实现代码
- jQuery视差滚动效果网页实现方法经验总结
相关文章推荐
- jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
- jQuery实现的表头固定效果实例【附完整demo源码下载】
- jQuery实现的粘性滚动导航栏效果实例【附源码下载】
- jquery拖拽效果完整实例(附demo源码下载)
- jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
- jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
- jQuery打字效果实现方法(附demo源码下载)
- jQuery动画显示和隐藏效果实例演示(附demo源码下载)
- jQuery实现可以控制图片旋转角度效果(附demo源码下载)
- jQuery实现可以编辑的表格实例详解【附demo源码下载】
- jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
- jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
- jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
- jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
- jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
- jQuery实现可以编辑的表格实例详解【附demo源码下载】
- jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
- jQuery抛物线运动实现方法(附完整demo源码下载)
- jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
- jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)