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 相关文章推荐
同一个网页中实现多个JavaScript特效的方法
Feb 02 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
Aug 26 Javascript
理解js对象继承的N种模式
Jan 25 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
May 17 Javascript
JS实现的3des+base64加密解密算法完整示例
May 18 Javascript
axios简单实现小程序延时loading指示
Jul 30 Javascript
使用原生js编写一个简单的框选功能方法
May 13 Javascript
JS为什么说async/await是generator的语法糖详解
Jul 11 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
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
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
PHP中冒号、endif、endwhile、endfor使用介绍
2010/04/28 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
PHP实现动态执行代码的方法
2016/03/25 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
基于jquery的放大镜效果
2012/05/30 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
JavaScript构造函数详解
2015/12/27 Javascript
JavaScript 数组some()和filter()的用法及区别
2016/05/20 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
java直接调用python脚本的例子
2014/02/16 Python
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
python开发之文件操作用法实例
2015/11/13 Python
python使用scrapy发送post请求的坑
2018/09/04 Python
python采集百度搜索结果带有特定URL的链接代码实例
2019/08/30 Python
Python魔术方法专题
2020/06/19 Python
解决Pymongo insert时会自动添加_id的问题
2020/12/05 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
2018/10/08 HTML / CSS
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
金山毒霸系列的笔试题
2013/04/13 面试题
竞选学生会主席演讲稿
2014/04/24 职场文书
2014年干部培训工作总结
2014/12/17 职场文书
会计出纳岗位职责
2015/03/31 职场文书
刮痧观后感
2015/06/05 职场文书