/** * Created by shangkuikui on 2017/4/26. */var tween = {    linear: function (t, b, c, d) {        return c * t / d + b;    },    easeIn: function (t, b, c, d) {        return c * ( t /= d ) * t + b;    },    strongEaseIn: function (t, b, c, d) {        return c * ( t /= d ) * t * t * t * t + b;    },    strongEaseOut: function (t, b, c, d) {        return c * ( ( t = t / d - 1) * t * t * t * t + 1 ) + b;    },    sineaseIn: function (t, b, c, d) {        return c * ( t /= d) * t * t + b;    },    sineaseOut: function (t, b, c, d) {        return c * ( ( t = t / d - 1) * t * t + 1 ) + b;    }};var Animate = function (dom) {    this.dom = dom; // 进行运动的dom 节点    this.startTime = 0; // 动画开始时间    this.startPos = 0; // 动画开始时，dom 节点的位置，即dom 的初始位置    this.endPos = 0; // 动画结束时，dom 节点的位置，即dom 的目标位置    this.propertyName = null; // dom 节点需要被改变的css 属性名    this.easing = null; // 缓动算法    this.duration = null; // 动画持续时间};Animate.prototype.start = function (propertyName, endPos, duration, easing, cb) {    this.startTime = +new Date; // 动画启动时间    this.startPos = this.dom.getBoundingClientRect()[propertyName]; // dom 节点初始位置    this.propertyName = propertyName; // dom 节点需要被改变的CSS 属性名    this.endPos = endPos; // dom 节点目标位置    this.duration = duration; // 动画持续事件    this.easing = tween[easing]; // 缓动算法    var self = this;    var timeId = setInterval(function () { // 启动定时器，开始执行动画        if (self.step() === false) { // 如果动画已结束，则清除定时器            clearInterval(timeId);            Event.trigger('finish');            if(cb && typeof cb === "function" ){                cb();            }        }    }, 19);};Animate.prototype.step = function () {    var t = +new Date; // 取得当前时间    if (t >= this.startTime + this.duration) { // (1)        this.update(this.endPos); // 更新小球的CSS 属性值        return false;    }    var pos = this.easing(t - this.startTime, this.startPos, this.endPos - this.startPos, this.duration);// pos 为小球当前位置    this.update(pos); // 更新小球的CSS 属性值};Animate.prototype.update = function( pos ){    this.dom.style[ this.propertyName ] = pos + 'px';};

var Event = (function () {    var global = this,        Event,        _default = 'default';    Event = function () {        var _listen,            _trigger,            _remove,            _slice = Array.prototype.slice,            _shift = Array.prototype.shift,            _unshift = Array.prototype.unshift,            namespaceCache = {},            _create,            find,            each = function (ary, fn) {                var ret;                for (var i = 0, l = ary.length; i < l; i++) {                    var n = ary[i];                    ret = fn.call(n, i, n);                }                return ret;            };        _listen = function (key, fn, cache) {            if (!cache[key]) {                cache[key] = [];            }            cache[key].push(fn);        };        _remove = function (key, cache, fn) {            if (cache[key]) {                if (fn) {                    for (var i = cache[key].length; i >= 0; i--) {                        if (cache[key][i] === fn) {                            cache[key].splice(i, 1);                        }                    }                } else {                    cache[key] = [];                }            }        };        _trigger = function () {            var cache = _shift.call(arguments),                key = _shift.call(arguments),                args = arguments,                _self = this,                ret,                stack = cache[key];            if (!stack || !stack.length) {                return;            }            return each(stack, function () {                return this.apply(_self, args);            });        };        _create = function (namespace) {            var namespace = namespace || _default;            var cache = {},                offlineStack = [], // 离线事件                ret = {                    listen: function (key, fn, last) {                        _listen(key, fn, cache);                        if (offlineStack === null) {                            return;                        }                        if (last === 'last') {                            offlineStack.length && offlineStack.pop()();                        } else {                            each(offlineStack, function () {                                this();                            });                        }                        offlineStack = null;                    },                    one: function (key, fn, last) {                        _remove(key, cache);                        this.listen(key, fn, last);                    },                    remove: function (key, fn) {                        _remove(key, cache, fn);                    },                    trigger: function () {                        var fn,                            args,                            _self = this;                        _unshift.call(arguments, cache);                        args = arguments;                        fn = function () {                            return _trigger.apply(_self, args);                        };                        if (offlineStack) {                            return offlineStack.push(fn);                        }                        return fn();                    }                };            return namespace ?                ( namespaceCache[namespace] ? namespaceCache[namespace] :                    namespaceCache[namespace] = ret )                : ret;        };        return {            create: _create,            one: function (key, fn, last) {                var event = this.create();                event.one(key, fn, last);            },            remove: function (key, fn) {                var event = this.create();                event.remove(key, fn);            },            listen: function (key, fn, last) {                var event = this.create();                event.listen(key, fn, last);            },            trigger: function () {                var event = this.create();                event.trigger.apply(this, arguments);            }        };    }();    return Event;})();

以上是文章中用到的两个js文件，event.js  和  animate.js

 

 

1普通青年版（初级命令模式）

    
          按钮1按钮2按钮3
      
       我是div
      

 

2文艺青年版（+撤销功能）

    
              移动    撤销        
      

3文艺青年豪华版（+回放（队列功能）模式，使用回调方式通知）

    
          移动撤销播放
      

4文艺青年豪华加长版（+回放（队列功能）模式，使用广播方式通知）

    
          移动撤销播放