jquery實(shí)現(xiàn)的3D旋轉(zhuǎn)木馬特效代碼分享

更新時(shí)間：2015年08月25日 09:40:57 投稿：lijiao

這篇文章主要介紹了jquery實(shí)現(xiàn)的3D旋轉(zhuǎn)木馬特效，功能實(shí)現(xiàn)非常簡(jiǎn)單，推薦給大家，有需要的小伙伴可以參考下。

本文實(shí)例講述了jquery實(shí)現(xiàn)的3D旋轉(zhuǎn)木馬特效。分享給大家供大家參考。具體如下：
這是一款基于jquery實(shí)現(xiàn)的3D旋轉(zhuǎn)木馬特效代碼，適合用于產(chǎn)品展示，便于用戶循環(huán)瀏覽產(chǎn)品細(xì)節(jié)，是一款非常實(shí)用的特效代碼。
運(yùn)行效果圖：----------------------查看效果下載源碼-----------------------

小提示：瀏覽器中如果不能正常運(yùn)行，可以嘗試切換瀏覽模式。
為大家分享的jquery實(shí)現(xiàn)的3D旋轉(zhuǎn)木馬特效代碼如下

<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旋轉(zhuǎn)木馬</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實(shí)現(xiàn)的3D旋轉(zhuǎn)木馬特效代碼，希望大家可以喜歡。

您可能感興趣的文章: