js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:js代码_js特效免费下载_JS特效代码网 > 网页特效 > JS常用代码 > 滚动代码

jquery实现飘动的云朵动画特效

发布时间:2015-09-02 14:12:48    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

jquery实现飘动的云朵动画特效
$(function () {

    //云彩类
    function Cloud(eParent, iIndex) {
        this.iIndex = iIndex;
        this.eParent = eParent;
        this.sClassName = '';
        this.arrZIndex = [0, 1, 2, 3];
        this._init();
    }
    Cloud.prototype = {
        constructor: Cloud,
        _getClassName: function () {
            return 'cloud-' + Math.floor(Math.random() * 5);
        },
        _getLateTime: function () {
            return this.iIndex * 1E4;
        },
        _getTotalTime: function () {
            return Math.floor(Math.random() * 5E4);
        },
        _init: function () {
            var _this = this;
            this.eCloud = $("<div class='cloud'></div>");
            this.eParent.append(this.eCloud);
            this._resetAttr();
            window.setTimeout(function () {
                _this.move();
            }, _this._getLateTime());
        },
        _resetAttr: function () {
            var sClassName = this._getClassName()
            this.eCloud.removeClass(this.sClassName).addClass(sClassName);
            this.sClassName = sClassName;
            this.eCloud.css({
                'left': window.screen.width,
                'top': Math.floor(Math.random() * 640 - this.eCloud.height() / 2),
                'z-index': this.arrZIndex[Math.floor(Math.random() * 4)]
            })
        },
        move: function () {
            var _this = this;
            _this.eCloud.animate({ 'left': -this.eCloud.width() }, 5E4, 'Linear', function () {
                _this._resetAttr();
                _this.move();
            });
        }
    }

    //启动云飘到
    ; (function () {
        var iTotal = 5, eTarget = $('#slide_content');
        while (iTotal--) {
            new Cloud(eTarget, iTotal);
        }
    })();

    //添加步骤
    function addStepsFn() {
        $.extend(this, {
            inScene: function () {
                this.nextIn();
            },
            outScene: function (callback) {
                callback && (this.outCallback = callback);
                this.nextOut();
            },
            nextIn: function () {
                this.inSteps[this.iStep]();
                this.iStep++;
            },
            nextOut: function () {
                this.iStep--;
                if (this.iStep < 0) {
                    this.iStep = 0
                }
                else {
                    this.outSteps[this.iStep]();
                }
            }
        });
    }
    //自定义动画
    function Animate(animateFn, endCallBack) {
        this.iTimer = 0;
        this.animateFn = animateFn;
        this.iTotal = 120;
        this.iT = 0;
        this.endCallBack = endCallBack;
    }
    Animate.prototype = {
        constructor: Animate,
        stop: function () {
            this.iT = 0;
            window.clearTimeout(this.iTimer);
        },
        act: function () {
            var _this = this;
            this.iTimer = window.setTimeout(function () {
                _this.iT++
                if (_this.iT < _this.iTotal) {
                    if (_this.animateFn(_this.iT)) {
                        _this.stop();
                        _this.endCallBack();
                    } else {
                        _this.act();
                    }
                } else {
                    _this.stop();
                    _this.endCallBack();
                }
            }, 13);
        }
    }

    //场景类
    var Scene0 = {
        init: function () {
            this.eStage = $('#stage_0');
            this.eComputer = $('#computer');
            this.eTitleList = $('#title-list-c li');
            this.eC = $('#slider_0')
            this.inSteps = [];
            this.outSteps = [];
            this.iStep = 0;
            this.outCallback = null;
            addStepsFn.call(this);
            this.iTimer = 0;

            this.setSteps();
        },
        stop: function () {
            this.eStage.stop();
            this.eComputer.stop();
            this.eTitleList.stop();
            window.clearTimeout(this.iTimer);
        },
        setSteps: function () {
            var _this = this;
            this.inSteps = [
                function () {
                    _this.eStage.show();
                    _this.eC.show();
                    _this.eStage.removeClass('slider-0-animate').css('opacity', 1).addClass('slider-0-animate').delay(1E3);
                    _this.iTimer = window.setTimeout(function () {
                        _this.nextIn();
                    }, 1.2E3);
                },
                function () {
                    _this.eComputer.stop().show().animate({
                        left: 280
                    }, 1E3, 'easeOutBack', function () { _this.nextIn(); });
                },
                function () {
                    var iLen = _this.eTitleList.length, iIndex = 0, eTemp = null;
                    for (; iIndex < iLen; iIndex++) {
                        eTemp = _this.eTitleList[iIndex];
                        $(eTemp).stop().delay(300 * iIndex).show().animate({
                            left: 0
                        }, .8E3, 'easeOutBounce');
                    }

                }
           ];
            this.outSteps = [
                function () {
                    _this.eStage.stop().css({ 'transform': '' }).animate({
                        'opacity': 0
                    }, .3E3, function () { _this.eC.hide(); _this.outCallback && _this.outCallback(); });
                },
                function () {
                    _this.eComputer.stop().show().animate({
                        left: 1000
                    }, 1E3, 'easeOutBack', function () { _this.nextOut(); });
                },
                function () {
                    var iLen = _this.eTitleList.length, iIndex = 0, eTemp = null, iCur = 0;
                    for (; iIndex < iLen; iIndex++) {
                        eTemp = _this.eTitleList[iIndex];
                        $(eTemp).stop().delay(100 * iIndex).animate({
                            left: -160
                        }, .5E3, 'easeOutBack', function () {
                            iCur++;
                            $(this).hide();
                            if (iCur == iLen) {
                                _this.nextOut();
                            }
                        });
                    }
                } ];
        }
    }
	
});



jquery 动画 飘动的云朵 js

jQuery左侧分类导航特效_jquery商城左侧分类菜单导航_橙色导航菜单特效代码

jquery选项卡切换,版块鼠标跟随边框变色特效

jquery带缩略图焦点滚动图特效代码

仿红木之家官网首页jquery焦点全屏大图切换特效

jQuery二级图文平滑下拉菜单特效代码

jquery顶部导航菜单下拉,左侧分类切换特效

jQuery实现固定顶部导航,点触全屏滚动特效代码

jQuery仿腾讯云全屏下拉导航菜单特效代码

一款jQuery跨平台并且带触摸移动端焦点图特效

jQuery四屏焦点图网站特效代码

jquery双重切换的tab选项卡特效代码

jquery仿360音乐搜索主页歌手切换选项卡特效

jquery tab选项卡插件支持鼠标滑过、点击、自动切换、数据回调等特效

jquery SuperSlide仿京东首页促销产品tab选项卡切换特效

jquery图片相册特效,切换上下页,还带对话框提醒特效

jquery实现右下角浮动返回顶部并且带微信二维码特效

jquery实现带微信二维码,qq客服,联系电话的返回顶部特效

jQuery右侧浮动客服特效,点击弹出窗口显示更多在线QQ客服

仿OPPO官方商城jquery焦点图特效

jquery绿色的按栏目下拉,信息搜索输入框特效代码

jquery点击切换,3d淡入动画,头像相册特效

jQuery+CSS3 实现动画图片相册,大图全屏展示,前后翻页特效代码

jQuery鼠标悬停导航底部边框线条伸缩动画效果

jQuery鼠标悬停内容动画切换效果

css3鼠标滑过栏目图片滑动切换动画特效

jquery.fullPage插件,仿网易邮箱6.0介绍上下滚动动画效果

jquery实现动画悬浮图标菜单特效

css3对话框插件来制作动画弹出表单特效

jquery实现浮层跟随图片动画特效

js+html5粒子效果浪漫表白的粒子文字动画特效

win8扁平风格宽屏焦点图片动画轮播特效

css3实现图标菜单,鼠标滑过图标动画菜单特效

css3旋转动画,制作鼠标经过圆形旋转特效

jquery+html5日历控件,制作多皮肤动画日历选择器特效

jQuery流星雨动画特效,jq流星雨特效代码

html5实现鼠标悬停图片动画展示特效

js+css3 实现扁平化APP图标黄色时钟,动画特效

jquery实现鼠标悬停图片动画显示文字信息特效

jQuery加入购物车产品飞入动画特效

css3实现多款实用的网页鼠标滑动按钮动画特效

友荐云推荐
大家说 此评论不代表本站观点