码迷,mamicode.com
首页 > Web开发 > 详细

jQuery 3D canvas 旋转木马(跑马灯)效果插件 - cloud carousel

时间:2015-01-20 22:01:57      阅读:354      评论:0      收藏:0      [点我收藏+]

标签:

插件名称-cloud carousel

最新版本-1.0.5

支持ie6-ie9,firefox,chrome,opera,safari等

1。引入jquery1.4.2.js 和CloudCarousel.1.0.5.js

2。添加页面自动加载插件js代码,进行初始化

$(document).ready(function(){
// 这初始化容器中指定的元素,在这种情况下,旋转木马.
  $("#carousel1").CloudCarousel({
    xPos:450,
    yPos:110,

    buttonLeft: $(‘#but1‘),
    buttonRight: $(‘#but2‘),

    altBox: $("#alt-text"),
    titleBox: $("#title-text"),
    FPS:30,
    reflHeight:86,
    reflGap:2,
    yRadius:40,
    autoRotate:‘left‘,
    autoRotateDelay: 1000,
    speed:0.2,
    mouseWheel:false,
    bringToFront:false
  });
});
</script>

3。html结构

<div class="weiduduan clearfix">

<div id="carousel1">

<div id="title-text">&nbsp;</div>
<div id="alt-text">&nbsp;</div>

<a href="http://www.weiduduan.com/js" target="_blank"><img src="images/9d03c58136f0f413d4f619536213bddb.jpg" title="jquery JScrollPane 插件" alt="jquery JScrollPane 插件设置浏览器默认垂直滚动条和内置滚动条" class="cloudcarousel" /></a>

<a href="http://www.weiduduan.com/web" target="_blank"><img src="images/f2a366c8954d666360c4b214940963cf.jpg" title="jquery 图像预览效果" alt="jquery 图片放大异步加载图片制作一个简单的jquery 图像预览效果" class="cloudcarousel" /></a>

<a href="http://www.weiduduan.com/yunzuo" target="_blank"><img src="images/bb276cedeaeb0438ed3275a9711b1d69.jpg" title="jquery 图片滚动特效" alt="jquery 图片滚动特效制作 slide 图片类似窗帘式滚动" class="cloudcarousel" /></a>

<a href="http://www.weiduduan.com/sucai" target="_blank" ><img src="images/aa6d7f26f941d87728eb0716d36d9cbe.jpg" title="jquery 图片展示" alt="jquery 图片展示制作图片类似金字塔式放大缩小展示" class="cloudcarousel" /></a>

<a href="http://www.weiduduan.com/js" target="_blank" ><img src="images/e748fbed210baf3dfa8849af0f89dfd7.jpg" title="jquery 图片幻灯片" alt="jquery 图片幻灯片仿IBM首页焦点图切换,类似flash动态效果图片切换" class="cloudcarousel" /></a>

<div class="carouselLeft" id="but1">&nbsp;</div>
<div class="carouselRight" id="but2">&nbsp;</div>

</div>
</div>

4。参数详解

reflHeight:0, //倒影的高度,单位是像素 
reflOpacity:0.5, //倒影透明度(0-1) 
reflGap:0, //图片与倒影之间的间隙,单位是像素 
minScale:0.5, //缩放比例 
xPos:0, //X轴偏移,一般设置成外框的一半,也就是实例中“#carousel1”的宽度的一半 
yPos:0, //Y轴偏移,这个可以自己调试看看,很直观的 
xRadius:0, //旋转幅度的水平半径,这个是猜的 
yRadius:0, //旋转幅度的垂直半径,这个是猜的,因为旋转的路径是个椭圆,你明白的
altBox:null, //显示图片alt属性的样式名称 
titleBox:null, //显示图片title属性的样式名称 
FPS: 30, //我猜是旋转运动的步长 
autoRotate: ‘no’, //是否自动播放,设置“left”或者“right”即可自动播放 
autoRotateDelay: 1500, //播放延时 
speed:0.2, //播放速度(0.1 ~ 0.3之间) 
mouseWheel: false, //是否支持滑轮,需要加在jQuery滑轮插件,官方的地址不见了,可以用百度“jquery.mousewheel”即可 
bringToFront: false, //这个参数设置为true,就是表示点击相应的图片,滚动到当前展示,一般是不打开自动播放时 
buttonLeft: “”, //控制向左的按钮 
buttonRight: “”, //控制向右的按钮

jQuery 3D canvas 旋转木马(跑马灯)效果插件 - cloud carousel

标签:

原文地址:http://www.cnblogs.com/wangpeipei07/p/4237367.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!