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


Posted in Javascript onSeptember 20, 2016

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

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

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

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐base.js
Dec 23 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
Mar 05 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
Vue学习之路之登录注册实例代码
Jul 06 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 Javascript
javaScript实现复选框全选反选事件详解
Nov 20 Javascript
vue.js动画中的js钩子函数的实现
Jul 06 Javascript
vue 自定义指令自动获取文本框焦点的方法
Aug 25 Javascript
js实现直播点击飘心效果
Aug 19 Javascript
JS中一些高效的魔法运算符总结
May 06 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
Sep 20 #Javascript
关于Javascript中defer和async的区别总结
Sep 20 #Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
Sep 20 #Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 #Javascript
JQuery手速测试小游戏实现思路详解
Sep 20 #Javascript
javascript cookie基础应用之记录用户名的方法
Sep 20 #Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 #Javascript
You might like
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
drupal 代码实现URL重写
2011/05/04 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
分享10段PHP常用代码
2015/11/11 PHP
CI框架中数据库操作函数$this-&gt;db-&gt;where()相关用法总结
2016/05/17 PHP
php技巧小结【推荐】
2017/01/19 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
jQuery中die()方法用法实例
2015/01/19 Javascript
JavaScript定时显示广告代码分享
2015/03/02 Javascript
jQuery动态星级评分效果实现方法
2015/08/06 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
js使用xml数据载体实现城市省份二级联动效果
2017/11/08 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
Python3单行定义多个变量或赋值方法
2018/07/12 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
python psutil模块使用方法解析
2019/08/01 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
DJI全球:DJI Global
2021/03/15 全球购物
最热门的自我评价
2013/12/30 职场文书
大学军训感言1500字
2014/03/09 职场文书
学习演讲稿范文
2014/05/10 职场文书
文明礼仪伴我行演讲稿
2014/05/12 职场文书
林肯就职演讲稿
2014/05/19 职场文书
人力资源求职信
2014/05/25 职场文书
日语专业求职信
2014/07/04 职场文书
一份恶作剧的检讨书
2014/09/13 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
Jsonp劫持学习
2021/04/01 PHP
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript