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">&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: “”, //控制向右的按钮

时间: 2024-10-26 07:31:51

jQuery 3D canvas 旋转木马(跑马灯)效果插件 - cloud carousel的相关文章

使用ivx的3D世界实现跑马灯效果的经验总结

之前的案例涉及的动画效果都是平面展示,但是ivx中也可以通过3D世界组件展示3D的效果.今天我们就以跑马灯为例来讲一下ivx中的3D世界是如何使用的.一.3D世界3D世界最基础的组成部分就是坐标系和摄像机.坐标系是一个空间直角坐标系,3D世界下的所有组件都会有一个XYZ坐标来决定它在3D世界中的位置,而摄像机负责控制我们的视角,下图中红圈处就是摄像机的位置,黄线框起来的区域就是我们的视角范围.另外我们还可以在3D世界中添加各种光源,字体,图片,图片序列和物体模型这些具有展示效果的组件,除此之外还

jCarousel Lite 实现图片跑马灯效果

官方网站:http://www.gmarwaha.com/jquery/jcarousellite/ demo: <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="http://libs.baidu.com/jquery/1.9.0/jquer

Android 自定义View实现竖直跑马灯效果

首先给出效果图 中间的色块是因为视频转成GIF造成的失真,自动忽略哈. 大家知道,横向的跑马灯android自带的TextView就可以实现,详情请百度[Android跑马灯效果].但是竖直的跑马灯效果原生Android是不支持的.网上也有很多网友实现了自定义的效果,但是我一贯是不喜欢看别人的代码,所以这篇博客的思路完全是我自己的想法哈. 首先,我们需要给自定义的控件梳理一下格局,如下图所示: 1.首先我们将控件分为三个区块,上面绿色部分为消失不可见的块,中间黑色部分为可见区域,下面红色部分为欲

练习:WinForm 跑马灯效果+Timer

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; namespace Timer { public partial class Form1 : Form { public Form1

Android TextView跑马灯效果

TextView跑马灯简单效果 <!--简单示例--> <TextView android:text="@string/longWord" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/textView1" android:ellipsize="marquee&quo

android 怎么实现跑马灯效果

自定义控件 FocusedTextView, 使android系统误以为它拥有焦点 1 public class FocusedTextView extends TextView { 2 public FocusedTextView(Context context, AttributeSet attrs, int defStyle) { 3 super(context, attrs, defStyle); 4 // TODO Auto-generated constructor stub 5 }

框架,锚点,背景音乐,嵌入视频和跑马灯效果

框架,iframe有点过时,会在部分浏览器出现一些奇怪的问题:设置三个属性: 1.src,框架默认的显示路径 2.name,让超链接的target属性与name值相等,就可以将超链接网页在框架中打开 3.框架的宽度和高度 站点:实际上就是一个文件夹,单独起了一个名字.统一来管理所有页面,就是一个站点,称之为网站 锚点: 书写格式:<a href="#锚点位置对应的名称">内容</a> --#是在本页面中 <a name="锚点位置的名称"

jquery实现图片和视频缓冲效果插件

jquery实现图片和视频缓冲效果插件: 创建一个动画效果的缓冲样式插件,插件可以开始.暂停.结束等功能,代码来源于网络希望对网络有所帮助. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <titl

Android界面(1) 使用TextView实现跑马灯效果

方法一:(只能实现单个TextView的跑马灯效果)在TextView添加以下控件 android:singleLine="true"只能单行,超出的文字显示为"..." android:ellipsize="marquee"省略号没有,但没有跑马灯效果 android:focusable="true" android:focusableInTouchMode="true" 方法二:(可以实现多行TextV