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

2019-11-20 11:43:41

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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 15031505." 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 15101515." 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 14781480." 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 14991500." 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+CSS实现的网页二级下滑菜单效果