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实现给出的盒子的序列是否可连为一矩型
Aug 30 Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
jQuery 生成svg矢量二维码
Aug 09 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
js图片无缝滚动插件使用详解
May 26 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 Javascript
vue 授权获取微信openId操作
Nov 13 Javascript
vue css 相对路径导入问题级踩坑记录
Jun 05 Vue.js
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截取中文字符串的问题
2006/07/12 PHP
PHP extract 将数组拆分成多个变量的函数
2010/06/30 PHP
laravel框架的安装与路由实例分析
2019/10/11 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
jQuery实现预加载图片的方法
2015/03/17 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
jQuery动态添加与删除tr行实例代码
2016/10/18 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
Python基于高斯消元法计算线性方程组示例
2018/01/17 Python
pytorch对可变长度序列的处理方法详解
2018/12/08 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
python通过cython加密代码
2020/12/11 Python
英国现代市场:ARKET
2019/04/10 全球购物
大一自我鉴定范文
2013/10/04 职场文书
后勤岗位职责
2013/11/26 职场文书
大学军训通讯稿
2014/01/13 职场文书
竞选班委演讲稿
2014/04/28 职场文书
食品质检员岗位职责
2015/04/08 职场文书
职位证明模板
2015/06/23 职场文书
2016年6.5世界环境日宣传活动总结
2016/04/01 职场文书
详解在OpenCV中如何使用图像像素
2022/03/03 Python