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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(1)
Dec 23 Javascript
jQuery 获取浏览器所在的IP地址的小例子
Nov 08 Javascript
jquery.post用法关于type设置问题补充
Jan 03 Javascript
jQuery中:last选择器用法实例
Dec 30 Javascript
jQuery实现获取绑定自定义事件元素的方法
Dec 02 Javascript
微信开发 消息推送实现代码
Oct 21 Javascript
Angular5中调用第三方js插件的方法
Feb 26 Javascript
微信小程序项目实践之验证码倒计时功能
Jul 18 Javascript
JS实现方形抽奖效果
Aug 27 Javascript
Node.js JSON模块用法实例分析
Jan 04 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
基于Web Audio API实现音频可视化效果
Jun 12 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
php实现多张图片上传加水印技巧
2013/04/18 PHP
destoon找回管理员密码的方法
2014/06/21 PHP
ThinkPHP、ZF2、Yaf、Laravel框架路由大比拼
2015/03/25 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
浅谈JavaScript超时调用和间歇调用
2015/08/30 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
2018/01/08 jQuery
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
微信小程序 JS动态修改样式的实现方法
2018/12/16 Javascript
使用Node.js实现一个多人游戏服务器引擎
2019/03/13 Javascript
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
Python中的迭代器漫谈
2015/02/03 Python
python爬取网页转换为PDF文件
2018/06/07 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
python如何实现一个刷网页小程序
2018/11/27 Python
Numpy 多维数据数组的实现
2020/06/18 Python
Python字符串三种格式化输出
2020/09/17 Python
python爬取招聘要求等信息实例
2020/11/20 Python
Python基于Webhook实现github自动化部署
2020/11/28 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
初一体育教学反思
2014/01/29 职场文书
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
投标授权委托书范文
2014/08/02 职场文书
个人学习总结范文
2015/02/15 职场文书
工程质量保证书
2015/05/09 职场文书
计划生育责任书
2015/05/09 职场文书
Nebula Graph解决风控业务实践
2022/03/31 MySQL
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js