jQuery 3d旋转木马

所属分类:媒体-滑块和旋转

 40195  309  查看评论 (15)
分享到微信朋友圈
X
jQuery 3d旋转木马 ie兼容10

关键方法:

TweenMax.to(target:Object, duration:Number, vars:Object):TweenMax
TweenMax.from(target:Object, duration:Number, vars:Object):TweenMax
TweenMax.allTo(targets:Array, duration:Number, vars:Object):Array
TweenMax.allFrom(targets:Array, duration:Number, vars:Object):Array
TweenMax.sequence(target:Object, tweens:Array):Array
TweenMax.getTweensOf(target:Object):Array
TweenMax.isTweening(target:Object):Boolean
TweenMax.getAllTweens():Array
TweenMax.killAllTweens(complete:Boolean):void
TweenMax.killAllDelayedCalls(complete:Boolean):void
TweenMax.pauseAll(tweens:Boolean, delayedCalls:Boolean):void
TweenMax.resumeAll(tweens:Boolean, delayedCalls:Boolean):void
pause():void
resume():void

示例:

对 MovieClip 进行连续的缓动,先用2秒钟时间让透明度降到 50%,然后用1秒钟时间滑落到 y 坐标为300的位置,使用如下的代码:import gs.TweenMax;

TweenMax.sequence(clip_mc, [{time:2, alpha:0.5}, {time:1, y:300}]);

使用 Back.easeOut 函数对影片剪辑 clip_mc 进行缓动,缓动持续 5秒钟,alpha 值变到 0.5,x 坐标变到 120,延迟 2秒钟执行,缓动结束后,调用“onFinishTweenusing”,并且为这个函数传递几个参数(数值5 和 对 clip_mc 的引用),代码如下:

import gs.TweenMax;
import fl.motion.easing.Back;
TweenMax.to(clip_mc, 5, {alpha:0.5, x:120, ease:Back.easeOut, delay:2, onComplete:onFinishTween, onCompleteParams:[5, clip_mc]});
function onFinishTween(argument1:Number, argument2:MovieClip):void {
    trace("The tween has finished! argument1 = " + argument1 + ", and argument2 = " + argument2);
}

如果舞台上的影片剪辑已经处于期望的缓动结束时位置,而你希望它从其它位置用 5 秒钟的时间回到当前位置,(比如从比当前位置高 100 像素或屏幕外更高的地方,通过改变 y 属性,下落到当前位置)可以使用下面的代码:

import gs.TweenMax;
import fl.motion.easing.Elastic;
TweenMax.from(clip_mc, 5, {y:"-100", ease:Elastic.easeOut});

备注

给参数值加上引号,表示对指定的属性进行相应操作。比如,使用 TweenMax.to(mc, 2, {x:"-20"}); 它将 mc.x 向左移动 20 像素,与此相同效果的代码是:

TweenMax.to(mc, 2, {x:mc.x - 20});

可以对任何 MovieClip 使用 “volume” 缓动,就比如:

TweenMax.to(myClip_mc, 1.5, {volume:0});

可以将 MovieClip 缓动成某种色调或颜色,使用 “tint” 属性,比如:

TweenMax.to(myClip_mc, 1.5, {tint:0xFF0000});

想要对数组内容进行缓动,将数值放到一个叫 endArray 的数组中即可,例如:

var myArray:Array = [1,2,3,4];
TweenMax.to(myArray, 1.5, {endArray:[10,20,30,40]});

可以在任何时候终止缓动,使用 TweenMax.killTweensOf(myClip_mc); 函数。如果想强制终止缓动,可以传递一个 true 做为第二个参数,比如

TweenMax.killTweensOf(myClip_mc, true);

去除延迟回调函数,用 TweenMax.killDelayedCallsTo(myFunction_func); 这项功能可以用来控制回调函数的优先级。

使用 TweenMax.from() 方法,可以使目标对象运动回它所在的位置。比如,你可以将对象在舞台上摆放整齐(缓动结束时的位置),然后利用缓动,让它们跑到那个位置上去,你可以将缓 动初始位置的 x 或 y 或 alpha (或者其它你需要的属性)当做参数传递给这个方法函数。

相关插件-滑块和旋转

jQuery互相限制边界的多滑块选区

jQuery滑块不重合 选值边界重合,带有初始化滑块位置功能。
  滑块和旋转
 17853  206

手机仿微信下滑

手机仿微信下滑
  滑块和旋转
 29220  298

jQuery鱼骨图

jQuery鱼骨图插件fishBone.js,横向滑块轮播
  滑块和旋转
 24027  250

轮播切换图片

随箭头点击,四张图片动态移动
  滑块和旋转
 29039  366

讨论这个项目(15)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    乾丶 0
    2018/4/14 8:58:23
    厉害是厉害,但是为什么停不下来,要是可以点击停下来单张放大预览就最好了
        undefined0
        2018/12/24 15:57:02

    回复
    吾皇乃一国之君 0
    2017/12/27 10:27:42
    /mn★怡琳★ 0
    2017/11/7 11:57:20
    那年丶 0
    2017/11/5 14:29:47

    为什么我把它调到下面  整体宽度变小了  为什么啊   作者咱俩聊聊呗

    回复
    树上漩涡 0
    2017/8/23 11:28:21

    怎么设置在固定的宽度里面呀,不然全屏都有反应

    回复
    major 0
    2017/7/18 17:04:51
    这个旋转木马真的好看 回复
    小小小小志@ 0
    2016/12/20 16:12:45

    这个在IE11上没办法运行呀。

    回复
    一笑奈何。 0
    2016/4/12 18:04:02
    哥们你好   我下载了你的插件  不会更改,可以聊聊吗?
        那年丶0
        2017/11/5 14:30:34
        可以在他的调他的css样式哇
    回复
    Baymax丶 0
    2016/3/31 13:03:07
    效果太炫了 可是太贵了! 回复
    shui2hou 0
    2016/3/8 15:03:27
    效果太炫了 可以太贵了! 回复
取消回复