jquery实现的3D旋转木马特效代码分享
2015-08-25 00:00
956 查看
本文实例讲述了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旋转木马特效代码,希望大家可以喜欢。
相关文章推荐
- jquery实现在网页指定区域显示自定义右键菜单效果
- jquery图片滚动放大代码分享
- jQuery合作伙伴左右滚动特效
- jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
- jquery实现向下滑出的二级导航下滑菜单效果
- 14款经典网页图片和文字特效的jQuery插件-前端开发必备
- jquery实现的淡入淡出下拉菜单效果
- jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
- 时钟Jquery+html5特效代码分享(可设置闹钟并且语音提醒)
- Jquery 分页插件之Jquery Pagination
- jQuery实现下滑菜单导航效果代码
- jQuery下拉美化搜索表单效果代码分享
- jQuery实现类似标签风格的导航菜单效果代码
- 基于jQuery实现仿百度首页换肤背景图片切换代码
- 基于jQuery实现的QQ表情插件
- jquery垮页面事件传递
- jQuery 属性选择其中的@
- jquery分析网址
- jQuery性能优化篇
- [150824]Jquery 学习笔记