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实现在文本框光标处添加字符的方法介绍
Nov 24 Javascript
node.js中的path.extname方法使用说明
Dec 09 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 Javascript
JS对HTML表格进行增删改操作
Aug 22 Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 Javascript
Json按某个键的值进行排序
Dec 22 Javascript
原生JS上传大文件显示进度条 php上传文件代码
Mar 27 Javascript
浅析JS抽象工厂模式
Dec 14 Javascript
vue.js select下拉框绑定和取值方法
Mar 03 Javascript
微信小程序实现简单跑马灯效果
May 26 Javascript
基于Vue的商品主图放大镜方案详解
Sep 19 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 图片上传实现代码 带详细注释
2010/04/29 PHP
PHP XML error parsing SOAP payload on line 1
2010/06/17 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
Zend Framework教程之Bootstrap类用法概述
2016/03/14 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
深入理解redux之compose的具体应用
2020/01/12 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
python中wx将图标显示在右下角的脚本代码
2013/03/08 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
python使用numpy读取、保存txt数据的实例
2018/10/14 Python
python 读取Linux服务器上的文件方法
2018/12/27 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
python线程信号量semaphore使用解析
2019/11/30 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
教师实习期自我鉴定
2013/10/06 职场文书
车间班长岗位职责
2013/11/30 职场文书
毕业生护理专业个人求职信范文
2014/01/04 职场文书
30岁生日感言
2014/01/25 职场文书
党员评议思想汇报
2014/10/08 职场文书
辞职信格式模板
2015/02/27 职场文书
学校开除通知书
2015/04/25 职场文书
倡议书的格式写法
2015/04/28 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书