jquery实现的回旋滚动效果完整实例【附demo源码下载】
更新时间：2016年09月20日 10:42:20 作者：朱羽佳
这篇文章主要介绍了jquery实现的回旋滚动效果,可实现点击后侧图片呈现立体翻转切换的功能,涉及jQuery插件roundabout.js的使用,并附带了完整实例demo源码供读者下载参考,需要的朋友可以参考下
本文实例讲述了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模拟Marquee实现无缝滚动效果完整实例
- jQuery实现的自定义滚动条实例详解
- jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
- jQuery实现的多张图无缝滚动效果【测试可用】
- JQuery插件iScroll实现下拉刷新，滚动翻页特效
- js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
- jQuery创建平滑的页面滚动(顶部或底部)
- JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
- 基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
- jquery无缝向上滚动实现代码
- jQuery视差滚动效果网页实现方法经验总结
相关文章
这篇文章主要为大家详细介绍了jQuery实现优雅弹窗效果 的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要为大家详细介绍了基于jquery二维码生成插件qrcode的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
这篇文章主要介绍了jquery左右全屏大尺寸多图滑动效果，特别适合用商城网站，视觉上特别有冲击感，推荐给大家，有需要的小伙伴可以参考下。2015-08-08
jQuery.validate.js表单验证插件的使用代码详解
Validate是基于jQuery的一款轻量级验证插件，内置丰富的验证规则，这篇文章主要介绍了jQuery.validate.js表单验证插件的使用代码详解,需要的朋友可以参考下2018-10-10
Jquery Ajax学习实例 向页面发出请求，返回XML格式数据
Jquery Ajax学习实例 向页面发出请求，返回XML格式数据的代码2010-03-03
这篇文章主要介绍了jQuery实现点击滚动到指定元素上的方法,结合实例形式分析了jQuery响应鼠标事件动态操作页面元素属性的相关相关使用技巧,需要的朋友可以参考下2020-03-03
JQuery插件fancybox无法在弹出层使用左右键的解决办法
本篇文章主要是对JQuery插件fancybox无法在弹出层使用左右键的解决办法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
jQuery获取当前鼠标相对位置坐标和点击图片跳转上一张或下一张功能2010-03-03
jQuery插件form-validation-engine正则表达式操作示例
这篇文章主要介绍了jQuery插件form-validation-engine正则表达式操作,结合实例形式分析了jQuery插件form-validation-engine进行正则验证操作的相关技巧,需要的朋友可以参考下2017-02-02
这篇文章主要介绍了jquery中ajax处理跨域的三大方式，感兴趣的小伙伴们可以参考一下2016-01-01
最新评论