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 相关文章推荐
json的定义、标准格式及json字符串检验
May 11 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
Apr 06 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
Vue.js 踩坑记之双向绑定
May 03 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 Javascript
如何自动化部署项目?折腾服务器之旅~
Apr 16 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 Javascript
Vuex的API文档说明详解
Feb 05 Javascript
小程序富文本提取图片可放大缩小
May 26 Javascript
ES6 解构赋值的原理及运用
May 25 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
?繁体转换的class
2006/10/09 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
PHP设置images目录不充许http访问的方法
2016/11/01 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
最全的JavaScript开发工具列表 总有一款适合你
2017/06/29 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
Python中__call__用法实例
2014/08/29 Python
python获取外网ip地址的方法总结
2015/07/02 Python
浅析Python函数式编程
2018/10/06 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
Python实现代码块儿折叠
2020/04/15 Python
解决Pycharm 中遇到Unresolved reference 'sklearn'的问题
2020/07/13 Python
Python扫描端口的实现
2021/01/25 Python
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
大二自我鉴定范文
2013/10/05 职场文书
学生自我鉴定
2013/12/18 职场文书
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
大学生自我鉴定评语
2014/01/27 职场文书
学生会竞聘书范文
2014/03/31 职场文书
相亲大会策划方案
2014/06/05 职场文书
学雷锋标语
2014/06/25 职场文书
六年级作文之关于梦
2019/10/22 职场文书
关于Numpy之repeat、tile的用法总结
2021/06/02 Python
Pygame Event事件模块的详细示例
2021/11/17 Python