jquery实现的3D旋转木马特效代码分享


Posted in Javascript onAugust 25, 2015

本文实例讲述了jquery实现的3D旋转木马特效。分享给大家供大家参考。具体如下:
这是一款基于jquery实现的3D旋转木马特效代码,适合用于产品展示,便于用户循环浏览产品细节,是一款非常实用的特效代码。
运行效果图:----------------------查看效果 下载源码-----------------------

jquery实现的3D旋转木马特效代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的jquery实现的3D旋转木马特效代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<title>jq 3D旋转木马</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/JavaScript" src="js/cloud-carousel.1.0.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#da-vinci-carousel").CloudCarousel( { 
reflHeight: 56,
reflGap:2,
titleBox: $('#da-vinci-title'),
altBox: $('#da-vinci-alt'),
buttonLeft: $('#but1'),
buttonRight: $('#but2'),
yRadius:40,
xPos: 285,
yPos: 120,
speed:0.15,
mouseWheel:true
});
$("#carousel2").CloudCarousel({ 
xPos:280,
yPos:80,
buttonLeft: $('#but3'),
buttonRight: $('#but4'), 
FPS:30,
autoRotate: 'left',
autoRotateDelay: 1200,
speed:0.2,
mouseWheel:true,
bringToFront:true
}); 
});
</script>
</head>
<body>
<center>
<br><br><br>
<div id="da-vinci-carousel" style="width:570px; height:384px;background: url(images/bg.jpg);overflow:scroll;">
<a href="images/382px-Leonardo_self.jpg" rel='lightbox' title="Leonardo Da Vinci"><img class="cloudcarousel" src="images/test9.png" width="128" height="164" alt="Self-portrait in red chalk, circa 1512-1515." title="Leonardo Da Vinci" /></a> 
<a href="images/396px-Mona_Lisa.jpg" rel='lightbox' title="Mona Lisa"><img class="cloudcarousel" src="images/test1.png" width="128" height="164" alt="Oil on cotton wood, circa 1503?1505." title="Mona Lisa" /></a>
<a href='images/439px-The_Lady_with_an_Ermine.jpg' rel='lightbox' title="Lady with an Ermine"><img class="cloudcarousel" src="images/test2.png" width="128" height="164" alt="Oil on wood panel, 1485." title="Lady with an Ermine" /></a>
<a href="images/Madonna_of_the_Yarnwinder.jpg" rel="lightbox" title="Madonna of the Yarnwinder"><img class="cloudcarousel" src="images/test3.png" width="128" height="164" alt="Oil on canvas, circa 1501." title="Madonna of the Yarnwinder" /></a>
<a href="images/470px-Madonna_Litta.jpg" rel="lightbox" title="Madonna and the Child"><img class="cloudcarousel" src="images/test4.png" width="128" height="164" alt="Oil on canvas (transferred from panel), circa 1490." title="Madonna and the Child" /></a>
<a href="images/390px-Bacchus_painting.jpg" rel="lightbox" title="Bacchus"><img class="cloudcarousel" src="images/test5.png" width="128" height="164" alt="Oil on walnut panel transferred to canvas, circa 1510?1515." title="Bacchus" /></a>
<a href = "images/452px-Madonna_of_the_carnation_EUR.jpg" rel="lightbox" title="Madonna of the Carnation" ><img class="cloudcarousel" src="images/test6.png" width="128" height="164" alt="Oil on panel, circa 1478?1480." title="Madonna of the Carnation" /></a>
<a href="images/454px-Leonardo_-_St._Anne_cartoon-alternative-downsampled.jpg" rel="lightbox" title="The Virgin and Child with St. Anne and St. John the Baptist"><img class="cloudcarousel" src="images/test7.png" width="128" height="164" alt="
Charcoal, black and white chalk on tinted paper, circa 1499?1500." title="The Virgin and Child with St. Anne and St. John the Baptist" /></a>
<a href="images/FileLeonardo-da-Vinci-020.jpg" rel="lightbox" title="The Virgin and Child with St. Anne"><img class="cloudcarousel" src="images/test8.png" width="128" height="164" alt="Oil on panel, circa 1510." title="The Virgin and Child with St. Anne" /></a>
<div id="da-vinci-title" ></div>
<div id="da-vinci-alt" ></div>
<div id="but1" class="carouselLeft" style="position:absolute;top:20px;right:64px;"></div>
<div id="but2" class="carouselRight" style="position:absolute;top:20px;right:20px;"></div> 
</div>
</center>
<div style="text-align:center;clear:both">
</div>
</body>
</html>

以上就是为大家分享的jquery实现的3D旋转木马特效代码,希望大家可以喜欢。

Javascript 相关文章推荐
JQuery 学习笔记 选择器之三
Jul 23 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
May 07 Javascript
php上传图片并给图片打上透明水印的代码
Jun 07 Javascript
jquery 跨域访问问题解决方法(笔记)
Jun 08 Javascript
容易被忽略的JS脚本特性
Sep 13 Javascript
ajax中get和post的说明及使用与区别
Dec 23 Javascript
js propertychange和oninput事件
Sep 28 Javascript
js实现网页随机切换背景图片的方法
Nov 01 Javascript
基于JS实现网页中的选项卡(两种方法)
Jun 16 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
微信小程序实现保存图片到相册功能
Nov 30 Javascript
解决Vue router-link绑定事件不生效的问题
Jul 22 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 #Javascript
jQuery实现点击小图显示大图代码分享
Aug 25 #Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 #Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 #Javascript
基于jQuery实现在线选座之高铁版
Aug 24 #Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 #Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
Aug 24 #Javascript
You might like
PHP中动态显示签名和ip原理
2007/03/28 PHP
在PHP中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
PHP实现的简单sha1加密功能示例
2017/08/27 PHP
javascript 获取元素样式必杀技
2014/05/04 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
解决layer.open后laydate失效的问题
2019/09/06 Javascript
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
[01:02]DOTA2上海特锦赛SHOWOPEN
2016/03/25 DOTA
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python类属性的延迟计算
2016/10/22 Python
详谈Python 窗体(tkinter)表格数据(Treeview)
2018/10/11 Python
python实现微信防撤回神器
2019/04/29 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
python自动下载图片的方法示例
2020/03/25 Python
Python接口测试文件上传实例解析
2020/05/22 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
利用python进行文件操作
2020/12/04 Python
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
Yahoo-PHP面试题2
2014/12/06 面试题
接口可以包含哪些成员
2012/09/30 面试题
大学新生军训感言
2014/02/25 职场文书
社会调查研究计划书
2014/05/01 职场文书
平安家庭示范户事迹
2014/06/02 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
2015年三万活动总结
2015/03/25 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
react如何快速设置文件路径别名
2021/04/28 Javascript