jQuery 3D canvas 旋转木马(跑马灯)效果插件 - cloud carousel
插件名称-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"> </div>
<div id="alt-text"> </div>
<a href="http://www.weiduduan.com/js" target="_blank"><img src="data:images/9d03c58136f0f413d4f619536213bddb.jpg" title="jquery JScrollPane 插件" alt="jquery JScrollPane 插件设置浏览器默认垂直滚动条和内置滚动条" class="cloudcarousel" /></a>
<a href="http://www.weiduduan.com/web" target="_blank"><img src="data:images/f2a366c8954d666360c4b214940963cf.jpg" title="jquery 图像预览效果" alt="jquery 图片放大异步加载图片制作一个简单的jquery 图像预览效果" class="cloudcarousel" /></a>
<a href="http://www.weiduduan.com/yunzuo" target="_blank"><img src="data:images/bb276cedeaeb0438ed3275a9711b1d69.jpg" title="jquery 图片滚动特效" alt="jquery 图片滚动特效制作 slide 图片类似窗帘式滚动" class="cloudcarousel" /></a>
<a href="http://www.weiduduan.com/sucai" target="_blank" ><img src="data:images/aa6d7f26f941d87728eb0716d36d9cbe.jpg" title="jquery 图片展示" alt="jquery 图片展示制作图片类似金字塔式放大缩小展示" class="cloudcarousel" /></a>
<a href="http://www.weiduduan.com/js" target="_blank" ><img src="data:images/e748fbed210baf3dfa8849af0f89dfd7.jpg" title="jquery 图片幻灯片" alt="jquery 图片幻灯片仿IBM首页焦点图切换,类似flash动态效果图片切换" class="cloudcarousel" /></a>
<div class="carouselLeft" id="but1"> </div>
<div class="carouselRight" id="but2"> </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的更多相关文章
- Android 自定义View跑马灯效果(一)
今天通过书籍重新复习了一遍自定义VIew,为了加强自己的学习,我把它写在博客里面,有兴趣的可以看一下,相互学习共同进步: 通过自定义一个跑马灯效果,来诠释一下简单的效果: 一.创建一个类继承View, ...
- JS写一个列表跑马灯效果--基于touchslide.js
先放上效果图: 类似于这样的,在列表中循环添加背景样式的跑马灯效果. 准备引入JS插件: <script type="text/javascript" src="x ...
- canvas九宫格跑马灯
canvas九宫格跑马灯抽奖 之前用dom写了一版,部分 安卓机会卡顿,换用canvas dom版本九宫格抽奖
- TextView跑马灯效果
转载:http://www.2cto.com/kf/201409/330658.html 一.只想让TextView显示一行,但是文字超过TextView的长度怎么办?在开头显示省略号 android ...
- Android_TextView之跑马灯效果
对于android控件中的TextView,相信大家一定不陌生,在显示文本内容时十分方便.不过我在使用时遇到一个小问题,就是当文字交多时,如何为用户进行展示.今天就为大家介绍一种解决方案--跑马灯效果 ...
- android中实现跑马灯效果以及AutoCompleteTestView与MultiAutoCompleteTextView的学习
跑马灯效果 1.用过属性的方式实现跑马灯效果 属性: android:singleLine="true" 这个属性是设置TextView文本中文字 ...
- Android 实现多行文本跑马灯效果
Android TextView 实现跑马灯的效果很简单,只要加三个属性就可以了. android:ellipsize="marquee" android:focusable=&q ...
- android:ellipsize实现跑马灯效果总结(转)
最近无意间看到了涉及到跑马灯效果的代码,于是在网上查阅了很多资料,在这里对自己看的一些文章进行一下总结,顺便加上自己的一些体会. 让我们一步步逐渐向下. 首先我们要实现走马灯这样一个效果,通常来说 ...
- flex 简单跑马灯效果(竖着显示)
<mx:Move id="move_area" target="{VBox_AreaWarning}"/> //move效果,模拟跑马灯 <s ...
随机推荐
- Android 检测是否连接蓝牙耳机
前言 欢迎大家我分享和推荐好用的代码段~~ 声明 欢迎转载,但请保留文章原始出处: CSDN:http://www.csdn.net ...
- 深入浅出Redis-redis底层数据结构(下)
概述: 学习使用Redis,其实并不需要去研究其底层数据的实现.我们只需要了解他有哪些常用的数据类型,然后熟练使用,就可以很好的掌握Redis 这个工具了.但是这样的学习方法只适合Redis 的入门, ...
- .Net程序员学用Oracle系列(10):系统函数(下)
<.Net程序员学用Oracle系列:导航目录> 本文大纲 1.转换函数 1.1.TO_CHAR 1.2.TO_NUMBER 1.3.TO_DATE 1.4.CAST 2.近似值函数 2. ...
- php文件上传及头像预览
php文件上传原理是通过form表单的enctype="multipart/form-data"属性将文件临时放到wamp文件夹中的tmp目录下,再通过后台php 程序将文件保存在 ...
- 当我们在谈论kmeans(5)
本系列意在长期连载分享,内容上可能也会有所删改: 因此如果转载,请务必保留源地址,非常感谢! 博客园:http://www.cnblogs.com/data-miner/(暂时公式显示有问题) 其他: ...
- idea导入web项目的部署
前几天 参考 http://zyjustin9.iteye.com/blog/2172712 这篇文章的部署,一直没有问题,今天又部署了一个项目,按照这个步骤,死活却不能部署成功.最后发现,原来是在部 ...
- pythong下的unittest框架
今天有空测试了下TestSuit的执行顺序,用discover遍历过来的tests,用runner执行. 只会识别继承了unittest的测试类中的测试用例.按setup和teardown的顺序进行执 ...
- 【CSS学习笔记】字体的控制
关于font-family: "无衬线体"(Sans-serif),比如黑体,微软雅黑 "有衬线体"(Serif),比如宋体,新宋 程序员设置的字体,客户电脑上 ...
- AngularJS2之Angular正式初探
前言:angular的官方教程真的不错.强烈推荐!!!] 按照环境搭建教程新建一个项目: 项目的结构如下: 其中package.json指示node需要安装的插件(npm install指令会安装的插 ...
- jemeter逻辑控制器
1.ForEach控制器 ForEach控制器在用户自定义变量中读取一系列相关的变量.该控制器下的采样器或控制器都会被执行一次或多次,每次读取不同的变量值.所以ForEach总是和User Defin ...