AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

jquery实现的回旋滚动效果完整实例【附demo源码下载】

51自学网 http://www.wanshiok.com
jquery,回旋滚动

本文实例讲述了jquery实现的回旋滚动效果。分享给大家供大家参考,具体如下:

这里分享一款回旋滚动效果,先上效果图:

具体代码如下:

<!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实现导航滚动到指定内容效果完整实例【附demo源码下载】  下一篇:移动端使用localStorage缓存Js和css文的方法(web开发)