来自 计算机网络 2019-09-04 19:47 的文章
当前位置: 六合联盟网 > 计算机网络 > 正文

jQuery完成的成品自动360度旋转体现特效源码分享

本文实例讲述了jquery实现的3D旋转木马特效。分享给大家供大家参考。具体如下:
这是一款基于jquery实现的3D旋转木马特效代码,适合用于产品展示,便于用户循环浏览产品细节,是一款非常实用的特效代码。
运行效果图:----------------------查看效果 下载源码-----------------------

这是一款基于jQuery实现的产品自动360度旋转展示特效代码,可以对产品进行360度旋转展示,更好的让顾客了解产品的全部外观细节。

图片 1

jQuery产品360度旋转展示代码,支持预加载,能够快速全面的的预览产品的图片,主要原理是利用多张图片按顺序播放实现,本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码。

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的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>

图片 2

以上就是为大家分享的jquery实现的3D旋转木马特效代码,希望大家可以喜欢。

为大家分享的jQuery实现的产品自动360度旋转展示特效代码如下

您可能感兴趣的文章:

  • jQuery实现鼠标悬停3d菜单展开动画效果
  • jquery+CSS3实现3D拖拽相册效果
  • 酷炫jQuery全屏3D焦点图动画效果
  • jQuery+CSS3实现3D立方体旋转效果
  • 基于jquery的3d效果实现代码
  • jquery实现叠层3D文字特效代码分享
  • jQuery实现3D文字特效的方法
  • jQuery实现图像旋转动画效果
  • jQuery实现的产品自动360度旋转展示特效源码分享
  • jQuery实现炫丽的3d旋转星空效果
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery产品360度旋转展示代码</title>
<link href="360show.css" rel="stylesheet" type="text/css">

<script src="jquery.min.js"></script>
<script type="text/javascript" src="360show.js" ></script>
</head>
<body>
<div id="box-wrapper">
 <div class="box-control box-control-left"><a title="顺时针转动" href="javascript:void(0)" class="prev" id="prev"></a></div>
 <div id="mask"><em class="loading">
  <p>loading</p>
  </em></div>
 <div id="box" path_pattern='img/###.png'></div>
 <div id="imgbox"></div>
 <div class="box-control box-control-right"><a title="逆时针转动" href="javascript:void(0)" class="next" id="next"></a></div>
</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>

</div>
</body>
</html>

以上就是为大家分享的jQuery实现的产品自动360度旋转展示特效代码,希望大家可以喜欢。

您可能感兴趣的文章:

  • jQuery实现鼠标悬停3d菜单展开动画效果
  • jquery+CSS3实现3D拖拽相册效果
  • 酷炫jQuery全屏3D焦点图动画效果
  • jQuery+CSS3实现3D立方体旋转效果
  • 基于jquery的3d效果实现代码
  • jquery实现的3D旋转木马特效代码分享
  • jquery实现叠层3D文字特效代码分享
  • jQuery实现3D文字特效的方法
  • jQuery实现图像旋转动画效果
  • jQuery实现炫丽的3d旋转星空效果

本文由六合联盟网发布于计算机网络,转载请注明出处:jQuery完成的成品自动360度旋转体现特效源码分享

关键词: