js动画(animate)简单引擎代码示例


Posted in Javascript onDecember 04, 2012

用惯了jquery的同学,相信都很欣赏其动画引擎。确实相对比较完善!如果,如果想像力足够丰富的话,相信可以做出超出想像的效果。当然,跟2d库比起来,还是相差相当一段距离。jquery压根也不是专门为动画而设计的。模拟真实世界方面,还是不足的。但在web世界里还是游刃有余的。动画其实一直是flash的专属领地(web区哉)。只是它常常沦为黑客攻击的漏洞所在,而且要装插件,有时候文件实在太大,而且性耗实在是高啊。html5出现后,其实adobe自己都转移阵地到html5了。当然,我觉得很长一段时间内,flash是不会被放弃的。

长话短说,步入正题。仿照flash的动画原理,自己写了一个非常简单的js动画引擎。

首先,用过flash的同学都知道。flash有个时间线,上面布满了“帧”。其实每个帧都是一个镜头,镜头连贯起来就是一副动画效果。其实,这跟电影的原理也一样的,小时候玩过胶片的都知道,对着光可以看到一副副的镜头。人眼分辨两个画面的连贯是有时间限度的。如果想看不到两个画面变换时的闪烁大概30帧/秒左右,电影是24帧的。所以,如果能保证,动画切换能保证每秒30次,基本上,就做到了动画的流畅效果,但是这取决环境。所以具体情况,具体而定,其实关于这方面的知识我也是一知半解。就这个动画引擎而言,了解这么多也差不多足够了,有兴趣可以查找相关知识!

下面开始说说设计原理。

首先需要一个帧频,也就是多少帧每秒。如果有了总用时,就可以计算出整个动画下来有多少个“画面”(总帧数)。这种设计,显然有个不足的地方,不能保证时间正好是个整数帧。除非1ms一帧。这是一个网友提出来的,我感觉不好就没有采用。所以这个引擎是有时间误差的。有了总帧数,当动画运行到最后一帧的时候,整个动画也就播放完。如果需要重复播放,重新把当前帧归0。这种动画有一个好处,就可以直接运行到指定帧。也就是flash里的gotoAndStop和gotoAndPlay。其实整个动画设计原理都是照着flash实现的。包括一个很重要的方法:enterFrame。位置就是根据进入当前帧来计算的。还有其它一些方法:stop、play、next......等等因为目前来说,这个引擎是写非常简单和粗糙的,先不说这么详细了。下面先上代码和示例吧!

animate.js 动画核心

var animation = function(obj) {
    this.obj = obj;
    this.frames = 0;
    this.timmer = undefined;
    this.running = false;
    this.ms = [];
}
animation.prototype = {
    fps: 36,
    init: function(props, duration, tween) {
        //console.log('初始化');
        this.curframe = 0;
        this.initstate = {};
        this.props = props;
        this.duration = duration || 1000;
        this.tween = tween || function(t, b, c, d) {
            return t * c / d + b;
        };
        this.frames = Math.ceil(this.duration * this.fps/1000);
        for (var prop in this.props) {
            this.initstate[prop] = {
                from: parseFloat($util.dom.getStyle(this.obj, prop)),
                to: parseFloat(this.props[prop])
            };
        }
    },
    start: function() {
        if (!this.running && this.hasNext()) {
            //console.log('可以执行...');
            this.ms.shift().call(this)
        }
        return this;
    },
    //开始播放
    play: function(callback) {
        //console.log('开始动画!');
        var that = this;
        this.running = true;
        if (this.timmer) {
            this.stop();
        }
        this.timmer = setInterval(function() {
            if (that.complete()) {
                that.stop();
                that.running = false;
                if (callback) {
                    callback.call(that);
                }
                return;
            }
            that.curframe++;
            that.enterFrame.call(that);
        },
 / this.fps);
        return this;
    },
    // 停止动画
    stop: function() {
        //console.log('结束动画!');
        if (this.timmer) {
            clearInterval(this.timmer);
            // 清除掉timmer id
            this.timmer = undefined;
        }
    },
    go: function(props, duration, tween) {
        var that = this;
        //console.log(tween)
        this.ms.push(function() {
            that.init.call(that, props, duration, tween);
            that.play.call(that, that.start);
        });
        return this;
    },
    //向后一帧
    next: function() {
        this.stop();
        this.curframe++;
        this.curframe = this.curframe > this.frames ? this.frames: this.curframe;
        this.enterFrame.call(this);
    },
    //向前一帧
    prev: function() {
        this.stop();
        this.curframe--;
        this.curframe = this.curframe < 0 ? 0 : this.curframe;
        this.enterFrame.call(this);
    },
    //跳跃到指定帧并播放
    gotoAndPlay: function(frame) {
        this.stop();
        this.curframe = frame;
        this.play.call(this);
    },
    //跳到指定帧停止播放
    gotoAndStop: function(frame) {
        this.stop();
        this.curframe = frame;
        this.enterFrame.call(this);
    },
    //进入帧动作
    enterFrame: function() {
        //console.log('进入帧:' + this.curframe)
        var ds;
        for (var prop in this.initstate) {
            //console.log('from: ' + this.initstate[prop]['from'])
            ds = this.tween(this.curframe, this.initstate[prop]['from'], this.initstate[prop]['to'] - this.initstate[prop]['from'], this.frames).toFixed(2);
            //console.log(prop + ':' + ds)
            $util.dom.setStyle(this.obj, prop, ds)
        }
    },
    //动画结束
    complete: function() {
        return this.curframe >= this.frames;
    },
    hasNext: function() {
        return this.ms.length > 0;
    }
}

下面是一个简单的工具,其中有所用到的缓动公式:

util.js

$util = {
    /**
    * 类型检测
    */
    type : function(obj){
        var rep = /\[object\s+(\w+)\]/i;
        var str = Object.prototype.toString.call(obj).toLowerCase();
        str.match(rep);
        return RegExp.$1;
    },
    /**
    * 深拷贝
    */
    $unlink :function (object){
        var unlinked;
        switch ($type(object)){
            case 'object':
                unlinked = {};
                for (var p in object) {
                    unlinked[p] = $unlink(object[p]);
                }
            break;
            case 'array':
                unlinked = [];
                for (var i = 0, l = object.length; i < l; i++) {
                    unlinked[i] = $unlink(object[i]);
                }
            break;
            default: return object;
        }
        return unlinked;
    },
    /**
    *Dom 相关操作
    */ 
    dom:{
        $: function(id) {
            return document.getElementById(id);
        },
        getStyle: function(obj, prop) {
            var style = obj.currentStyle || window.getComputedStyle(obj, '');
            if (obj.style.filter) {
                return obj.style.filter.match(/\d+/g)[0];
            }
            return style[prop];
        },
        setStyle: function(obj, prop, val) {
            switch (prop) {
            case 'opacity':
                if($util.client.browser.ie){
                    obj.style.filter = 'alpha(' + prop + '=' + val*100 + ')'    
                }else{
                    obj.style[prop] = val;
                }
                break;
            default:
                obj.style[prop] = val + 'px';
                break;
            }
        },
        setStyles: function(obj, props) {
            for (var prop in props) {
                switch (prop) {
                case 'opacity':
                    if($util.client.browser.ie){
                        obj.style.filter = 'alpha(' + prop + '=' + props[prop] + ')'        
                    }else{
                        obj.style[prop] = props[prop];
                    }
                    break;
                default:
                    obj.style[prop] = props[prop] + 'px';
                    break;
                }
            }
        }
    },
    /**
    *Event 事件相关
    */
    evt : {
        addEvent : function(oTarget, sEventType, fnHandler) {
            if (oTarget.addEventListener) {
                oTarget.addEventListener(sEventType, fnHandler, false);
            } else if (oTarget.attachEvent) {
                oTarget.attachEvent("on" + sEventType, fnHandler);
            } else {
                oTarget["on" + sEventType] = fnHandler;
            }
        },
        rmEvent : function removeEventHandler (oTarget, sEventType, fnHandler) {
            if (oTarget.removeEventListener) {
                oTarget.removeEventListener(sEventType, fnHandler, false);
            } else if (oTarget.detachEvent) {
                oTarget.detachEvent("on" + sEventType, fnHandler);
            } else { 
                oTarget["on" + sEventType] = null;
            }
        }
    },
    /**
    *Ajax 异步加载
    */
    ajax : {
        request:function (options) {
                var xhr, res;
                var url = options.url, 
                    context = options.context, 
                    success = options.success, 
                    type = options.type, 
                    datatype = options.datatype, 
                    async = options.async, 
                    send = options.send,
                    headers = options.headers;                try {
                    xhr = new XMLHttpRequest();
                } catch(e) {
                    try {
                        xhr = new ActiveXObject('MSXML2.XMLHTTP');
                    } catch(e) {
                        xhr = new ActiveXObject('Microsoft.XMLHTTP');
                    }
                }
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        res = xhr.responseText;
                        success(res);
                    }
                }
                xhr.open(type, url, async);
                xhr.send(send);
        }
    },
    /**
    *Array 数组相关
    */
    array : {
        minIndex : function(ary){
            return Math.min.apply(null,ary);    
        },
        maxitem : function(ary){
            return Math.max.apply(null,ary);
        }
    },
    /**
    *Client 客户端检测
    */
    client : function(){
        // 浏览器渲染引擎 engines
        var engine = {            
            ie: 0,
            gecko: 0,
            webkit: 0,
            khtml: 0,
            opera: 0,

            //complete version
            ver: null  
        };
        // 浏览器
        var browser = {
            //browsers
            ie: 0,
            firefox: 0,
            safari: 0,
            konq: 0,
            opera: 0,
            chrome: 0,
            //specific version
            ver: null
        };
        // 客户端平台platform/device/OS
        var system = {
            win: false,
            mac: false,
            x11: false,
            //移动设备
            iphone: false,
            ipod: false,
            ipad: false,
            ios: false,
            android: false,
            nokiaN: false,
            winMobile: false,
            //game systems
            wii: false,
            ps: false 
        };    
        // 检测浏览器引擎
        var ua = navigator.userAgent;    
        if (window.opera){
            engine.ver = browser.ver = window.opera.version();
            engine.opera = browser.opera = parseFloat(engine.ver);
        } else if (/AppleWebKit\/(\S+)/.test(ua)){
            engine.ver = RegExp["$1"];
            engine.webkit = parseFloat(engine.ver);
            //figure out if it's Chrome or Safari
            if (/Chrome\/(\S+)/.test(ua)){
                browser.ver = RegExp["$1"];
                browser.chrome = parseFloat(browser.ver);
            } else if (/Version\/(\S+)/.test(ua)){
                browser.ver = RegExp["$1"];
                browser.safari = parseFloat(browser.ver);
            } else {
                //approximate version
                var safariVersion = 1;
                if (engine.webkit < 100){
                    safariVersion = 1;
                } else if (engine.webkit < 312){
                    safariVersion = 1.2;
                } else if (engine.webkit < 412){
                    safariVersion = 1.3;
                } else {
                    safariVersion = 2;
                }   
                browser.safari = browser.ver = safariVersion;        
            }
        } else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){
            engine.ver = browser.ver = RegExp["$1"];
            engine.khtml = browser.konq = parseFloat(engine.ver);
        } else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){    
            engine.ver = RegExp["$1"];
            engine.gecko = parseFloat(engine.ver);
            //determine if it's Firefox
            if (/Firefox\/(\S+)/.test(ua)){
                browser.ver = RegExp["$1"];
                browser.firefox = parseFloat(browser.ver);
            }
        } else if (/MSIE ([^;]+)/.test(ua)){    
            engine.ver = browser.ver = RegExp["$1"];
            engine.ie = browser.ie = parseFloat(engine.ver);
        }
        //detect browsers
        browser.ie = engine.ie;
        browser.opera = engine.opera;
        
        //detect platform
        var p = navigator.platform;
        system.win = p.indexOf("Win") == 0;
        system.mac = p.indexOf("Mac") == 0;
        system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
        //detect windows operating systems
        if (system.win){
            if (/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua)){
                if (RegExp["$1"] == "NT"){
                    switch(RegExp["$2"]){
                        case "5.0":
                            system.win = "2000";
                            break;
                        case "5.1":
                            system.win = "XP";
                            break;
                        case "6.0":
                            system.win = "Vista";
                            break;
                        case "6.1":
                            system.win = "7";
                            break;
                        default:
                            system.win = "NT";
                            break;                
                    }                            
                } else if (RegExp["$1"] == "9x"){
                    system.win = "ME";
                } else {
                    system.win = RegExp["$1"];
                }
            }
        }
        //mobile devices
        system.iphone = ua.indexOf("iPhone") > -1;
        system.ipod = ua.indexOf("iPod") > -1;
        system.ipad = ua.indexOf("iPad") > -1;
        system.nokiaN = ua.indexOf("NokiaN") > -1;
        //windows mobile
        if (system.win == "CE"){
            system.winMobile = system.win;
        } else if (system.win == "Ph"){
            if(/Windows Phone OS (\d+.\d+)/.test(ua)){;
                system.win = "Phone";
                system.winMobile = parseFloat(RegExp["$1"]);
            }
        }
        //determine iOS version
        if (system.mac && ua.indexOf("Mobile") > -1){
            if (/CPU (?:iPhone )?OS (\d+_\d+)/.test(ua)){
                system.ios = parseFloat(RegExp.$1.replace("_", "."));
            } else {
                system.ios = 2;  //can't really detect - so guess
            }
        }
        //determine Android version
        if (/Android (\d+\.\d+)/.test(ua)){
            system.android = parseFloat(RegExp.$1);
        }
        //gaming systems
        system.wii = ua.indexOf("Wii") > -1;
        system.ps = /playstation/i.test(ua);
        //return it
        return {
            engine:     engine,
            browser:    browser,
            system:     system        
        };
    }(),
    /**
    *Tween 缓动相关
    */
    tween: {
        Linear: function(t, b, c, d) {
            return c * t / d + b;
        },
        Quad: {
            easeIn: function(t, b, c, d) {
                return c * (t /= d) * t + b;
            },
            easeOut: function(t, b, c, d) {
                return - c * (t /= d) * (t - 2) + b;
            },
            easeInOut: function(t, b, c, d) {
                if ((t /= d / 2) < 1) return c / 2 * t * t + b;
                return - c / 2 * ((--t) * (t - 2) - 1) + b;
            }
        },
        Cubic: {
            easeIn: function(t, b, c, d) {
                return c * (t /= d) * t * t + b;
            },
            easeOut: function(t, b, c, d) {
                return c * ((t = t / d - 1) * t * t + 1) + b;
            },
            easeInOut: function(t, b, c, d) {
                if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
                return c / 2 * ((t -= 2) * t * t + 2) + b;
            }
        },
        Quart: {
            easeIn: function(t, b, c, d) {
                return c * (t /= d) * t * t * t + b;
            },
            easeOut: function(t, b, c, d) {
                return - c * ((t = t / d - 1) * t * t * t - 1) + b;
            },
            easeInOut: function(t, b, c, d) {
                if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
                return - c / 2 * ((t -= 2) * t * t * t - 2) + b;
            }
        },
        Quint: {
            easeIn: function(t, b, c, d) {
                return c * (t /= d) * t * t * t * t + b;
            },
            easeOut: function(t, b, c, d) {
                return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
            },
            easeInOut: function(t, b, c, d) {
                if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
                return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
            }
        },
        Sine: {
            easeIn: function(t, b, c, d) {
                return - c * Math.cos(t / d * (Math.PI / 2)) + c + b;
            },
            easeOut: function(t, b, c, d) {
                return c * Math.sin(t / d * (Math.PI / 2)) + b;
            },
            easeInOut: function(t, b, c, d) {
                return - c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
            }
        },
        Expo: {
            easeIn: function(t, b, c, d) {
                return (t == 0) ? b: c * Math.pow(2, 10 * (t / d - 1)) + b;
            },
            easeOut: function(t, b, c, d) {
                return (t == d) ? b + c: c * ( - Math.pow(2, -10 * t / d) + 1) + b;
            },
            easeInOut: function(t, b, c, d) {
                if (t == 0) return b;
                if (t == d) return b + c;
                if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
                return c / 2 * ( - Math.pow(2, -10 * --t) + 2) + b;
            }
        },
        Circ: {
            easeIn: function(t, b, c, d) {
                return - c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
            },
            easeOut: function(t, b, c, d) {
                return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
            },
            easeInOut: function(t, b, c, d) {
                if ((t /= d / 2) < 1) return - c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
                return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
            }
        },
        Elastic: {
            easeIn: function(t, b, c, d, a, p) {
                if (t == 0) return b;
                if ((t /= d) == 1) return b + c;
                if (!p) p = d * .3;
                if (!a || a < Math.abs(c)) {
                    a = c;
                    var s = p / 4;
                } else var s = p / (2 * Math.PI) * Math.asin(c / a);
                return - (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
            },
            easeOut: function(t, b, c, d, a, p) {
                if (t == 0) return b;
                if ((t /= d) == 1) return b + c;
                if (!p) p = d * .3;
                if (!a || a < Math.abs(c)) {
                    a = c;
                    var s = p / 4;
                } else var s = p / (2 * Math.PI) * Math.asin(c / a);
                return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
            },
            easeInOut: function(t, b, c, d, a, p) {
                if (t == 0) return b;
                if ((t /= d / 2) == 2) return b + c;
                if (!p) p = d * (.3 * 1.5);
                if (!a || a < Math.abs(c)) {
                    a = c;
                    var s = p / 4;
                } else var s = p / (2 * Math.PI) * Math.asin(c / a);
                if (t < 1) return - .5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
                return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
            }
        },
        Back: {
            easeIn: function(t, b, c, d, s) {
                if (s == undefined) s = 1.70158;
                return c * (t /= d) * t * ((s + 1) * t - s) + b;
            },
            easeOut: function(t, b, c, d, s) {
                if (s == undefined) s = 1.70158;
                return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
            },
            easeInOut: function(t, b, c, d, s) {
                if (s == undefined) s = 1.70158;
                if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
                return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
            }
        },
        Bounce: {
            easeIn: function(t, b, c, d) {
                return c - Tween.Bounce.easeOut(d - t, 0, c, d) + b;
            },
            easeOut: function(t, b, c, d) {
                if ((t /= d) < (1 / 2.75)) {
                    return c * (7.5625 * t * t) + b;
                } else if (t < (2 / 2.75)) {
                    return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
                } else if (t < (2.5 / 2.75)) {
                    return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
                } else {
                    return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
                }
            },
            easeInOut: function(t, b, c, d) {
                if (t < d / 2) return Tween.Bounce.easeIn(t * 2, 0, c, d) * .5 + b;
                else return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
            }
        }
    }
}

下面是个应用:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script src="util.js" type="text/javascript"></script>
<script src="animate.js" type="text/javascript"></script>
<style type="text/css">
    body{behavior:url("csshover.htc")}
    *{padding:0;margin:0}
    .mianbox{width:480px;margin:50px auto;height:240px;}
    .leftbtn{width:20px;background:#eee;border:1px solid #ddd;float:left;margin-right:8px;height:240px;}
    .leftbtn:hover{background:#fff}
    .rightbtn{width:20px;background:#eee;border:1px solid #ddd;float:right;height:240px;}
    .rightbtn:hover{background:#fff}
    .con{width:420px;float:left;height:240px;overflow:hidden;position:relative}
    .con ul{ white-space:nowrap;font-size:0;position:absolute;left:0;top:0;}
    .con li{display:inline; vertical-align:bottom;margin-right:10px}
</style>
</head>
<body>
    <div class="mianbox">
        <div class="leftbtn" id="leftbtn"></div>
        <div class="con">
            <ul>
                <li><img src="http://pic25.nipic.com/20121121/2969675_091845785000_2.jpg" width="205" height="240" /></li>
                <li><img src="http://pic23.nipic.com/20120818/9715349_114354586392_2.jpg" width="205" height="240" /></li>
                <li><img src="http://pic20.nipic.com/20120329/9715349_154806479182_2.jpg" width="205" height="240" /></li>
                <li><img src="http://pic20.nipic.com/20120329/9715349_162301568121_2.jpg" width="205" height="240" /></li>
                <li><img src="http://pic23.nipic.com/20120824/9715349_160522342186_2.jpg" width="205" height="240" /></li>
                <li><img src="http://pic23.nipic.com/20120824/9715349_160651385195_2.jpg" width="205" height="240" /></li>
                <li><img src="http://pic20.nipic.com/20120329/9715349_163520278182_2.jpg" width="205" height="240" /></li>
                <li><img src="http://pic23.nipic.com/20120827/9715349_110350505124_2.jpg" width="205" height="240" /></li>
            </ul>
        </div>
        <div class="rightbtn" id="rightbtn"></div>
    </div>
    <script>
        /**
        * @para obj  内容对象
        * @para lbtn 左按钮
        * @para rbtn 右按钮
        * @para w      每次滚动的宽
        * @para duration 每次运行时间
        * @para tween 缓动类型
        */
        function scOnce(obj, lbtn, rbtn, w, autotime, duration,tween){
            var am = new animation(_ul),
                step=0,
                ulen = obj.scrollWidth,
                timmerm
                dr = 'left',
                that = this;
            // 最右端?
            function isr(){
                return parseInt($util.dom.getStyle(obj, 'left')) >=0;    
            }
            // 最左端?
            function isl(){
                return ulen - Math.abs(parseInt($util.dom.getStyle(obj, 'left')))-10 <= w;    
            }
            if(isr()&&isl())
            return;
            // 左移
            this.goleft = function (){
                step += -1*w;
                am.go({left:step+"px"},duration,tween).start();    
            }
            // 右移
            this.goright = function (){
                step += w;
                am.go({left:step+"px"},duration,tween).start();    
            }
            // 注册左按钮事件
            $util.evt.addEvent(lbtn,'click',function(){
                isl()? that.goright():that.goleft();
            })
            // 注册右按钮事件
            $util.evt.addEvent(rbtn,'click',function(){
                isr()? that.goleft():that.goright();
            })
            $util.evt.addEvent(rbtn,'mouseover',function(){
                clearTimeout(timmer);
            })
            $util.evt.addEvent(lbtn,'mouseover',function(){
                clearTimeout(timmer);
            })
            $util.evt.addEvent(rbtn,'mouseout',function(){
                timmer = setInterval(auto,autotime);
            })
            $util.evt.addEvent(lbtn,'mouseout',function(){
                timmer = setInterval(auto,autotime);
            })
            function auto(){
                if(isl()){
                    dr = "right";
                }
                if(isr()){
                    dr = "left";
                }
                that['go'+dr]();
            }
            timmer = setInterval(auto,autotime);
        }
        var _ul = document.getElementsByTagName('ul')[0],
            lbtn = document.getElementById('leftbtn'),
            rbtn = document.getElementById('rightbtn');
        var startgo = new scOnce(_ul,lbtn,rbtn,430,3000,500,$util.tween.Quint.easeInOut);
    </script>
</body>
</html>

 

Javascript 相关文章推荐
JS 容错处理代码, 屏蔽错误信息
Mar 09 Javascript
JavaScript 学习笔记(十五)
Jan 28 Javascript
写js时遇到的一些小问题
Dec 06 Javascript
jQuery添加和删除输入文本框标签代码
May 20 Javascript
Canvas实现放射线动画效果
Feb 15 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
js canvas实现简单的图像扩散效果
Jun 28 Javascript
Electron-vue脚手架改造vue项目的方法
Oct 22 Javascript
node和vue实现商城用户地址模块
Dec 05 Javascript
使用Angular Cli如何创建Angular私有库详解
Jan 30 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
Feb 08 Javascript
微信小程序实现首页弹出广告
Dec 03 Javascript
JavaScript中“+”的陷阱深刻理解
Dec 04 #Javascript
将光标定位于输入框最右侧实现代码
Dec 04 #Javascript
JavaScript中__proto__与prototype的关系深入理解
Dec 04 #Javascript
js 限制数字 js限制输入实现代码
Dec 04 #Javascript
JSON语法五大要素图文介绍
Dec 04 #Javascript
js关闭子窗体刷新父窗体实现方法
Dec 04 #Javascript
cument.execCommand()用法深入理解
Dec 04 #Javascript
You might like
Ajax+PHP边学边练 之五 图片处理
2009/12/03 PHP
php取出数组单个值的方法
2018/03/12 PHP
windows系统php环境安装swoole具体步骤
2021/03/04 PHP
javascript下高性能字符串连接StringBuffer类
2010/08/16 Javascript
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
2016/12/08 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
微信小程序实现多个按钮的颜色状态转换
2019/02/15 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
用pandas按列合并两个文件的实例
2018/04/12 Python
在python里协程使用同步锁Lock的实例
2019/02/19 Python
Python实现去除图片中指定颜色的像素功能示例
2019/04/13 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
python爬虫 基于requests模块发起ajax的get请求实现解析
2019/08/20 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
python读取excel进行遍历/xlrd模块操作
2020/07/12 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
浅析pandas随机排列与随机抽样
2021/01/22 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
幼儿园大班毕业感言
2014/02/06 职场文书
大二学生自我检讨书
2014/10/23 职场文书
大学生见习报告范文
2014/11/03 职场文书
先进事迹材料范文
2014/12/29 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
欢送会主持词
2015/07/01 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书