ホームページ > 記事 > ウェブフロントエンド > jquery_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 カルーセル効果のコードです。気に入っていただければ幸いです。