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 相关文章推荐
javascript截取字符串(通过substring实现并支持中英文混合)
Jun 24 Javascript
使用闭包对setTimeout进行简单封装避免出错
Jul 10 Javascript
简介JavaScript中的getSeconds()方法的使用
Jun 10 Javascript
给before和after伪元素设置js效果的方法
Dec 04 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
AngularJS基础 ng-show 指令简单示例
Aug 03 Javascript
AngularJS实现表单验证功能
Jan 09 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
Jan 16 Javascript
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
详解Vue中的watch和computed
Nov 09 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者的疑难问答(1)
2006/10/09 PHP
提高php编程效率技巧
2015/08/13 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
PHP创建多级目录的两种方法
2016/10/28 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
Laravel 将数据表的数据导出,并生成seeds种子文件的方法
2019/10/09 PHP
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
微信小程序实现tab切换效果
2017/11/21 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
angularjs模态框的使用代码实例
2019/12/20 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
数控技术与应用毕业生自荐信
2013/09/24 职场文书
工商管理专业实习生自我鉴定
2013/09/29 职场文书
保安的辞职报告怎么写
2014/01/20 职场文书
户外宣传策划方案
2014/05/25 职场文书
员工加薪申请报告
2015/05/15 职场文书
家电创业计划书
2019/08/05 职场文书
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python
详解redis在微服务领域的贡献
2021/10/16 Redis