无插件移动模型

移动标签

标签栏

当标签很多的时候，要实现左右移动。

移动模型
初次给ul一个足够大的宽值(999%)，为防止标签过多而折行。然后在渲染完毕之后，根据标签和间距，计算ul的真实宽度，使滑到到最后一个标签就不会继续滑动到空白处了（前提：视图窗口的 overflow-x:auto）。用jQuery $('.tag').css('padding-left') 等可以获取到标签真实的px值。
我本来一直想用swiper插件看能不能实现，但是插件一直使得每一个标签全屏宽，也有不是全屏宽的div,但似乎要设宽。因为标签内容不定，不能设等宽。所以不能用Swiper。

仅仅只有移动，无论在IOS还是Android下都显得挺失色的。有点反弹才比较舒服。jQuery有个封装好的额插件，带有animate的，忘了叫什么名字，带有一点滑动的速度，显得特别不错。

update：
最终，交付反馈我的滑动效果不好。这肯定得改的。找到了现成的jquery插件。必须以下面的格式才可以，当然，也可以改写源码，好像不太难。用 $('#container').touchslider();触发，主要识别** ul.slides**

<div id="container">
  <ul class="slides">
    <li>xxxxx1</li>
    <li>xxxxx2</li>
  </ul>
</div>

附上插件的源码：（插件是动态计算li的outWidth，即padding和width，如果有margin需要另外加上去，在doMath函数里修改就可以了）

(function(a) {
a.touchslider = function(c) {
    var d = a(c),
    e = ("ontouchstart" in window) || window.DocumentTouch && document instanceof DocumentTouch,
    b = {};
    a.data(c, "touchslider", d);
    b = {
        init: function() {
            d.container = a("ul.slides", d);
            d.slides = a("li", d.container);
            d.find("div.loading").remove();
            d.container.show();
            d.x = 0;
            d.switchs = true;
            a("a", d.slides).bind("click",
            function() {
                var f = d.container.position().left;
                if (Math.abs(f - d.x) > 5) {
                    d.setProps(Math.abs(f));
                    return false
                }
            });
            d.prop = "marginLeft";
            d.args = {};
            d.transitions = (function() {
                var h = document.createElement("div"),
                g = ["perspectiveProperty", "WebkitPerspective", "MozPerspective", "OPerspective", "msPerspective"];
                for (var f in g) {
                    if (h.style[g[f]] !== undefined) {
                        d.pfx = g[f].replace("Perspective", "").toLowerCase();
                        d.prop = "-" + d.pfx + "-transform";
                        return true
                    }
                }
                return false
            } ());
            d.doMath();
            d.setup();
            if (d.switchs) {
                if (e) {
                    b.touch()
                }
                a(window).bind("resize focus", b.resize)
            }
        },
        touch: function() {
            var p, n, k, s, h, q, l, i, j, g, o = false;
            c.addEventListener("touchstart", m, false);
            function m(t) {
                if (t.touches.length === 1) {
                    q = Number(new Date());
                    h = 0;
                    i = 0;
                    j = 0;
                    k = Math.abs(d.x);
                    p = t.touches[0].pageX;
                    n = t.touches[0].pageY;
                    c.addEventListener("touchmove", f, false);
                    c.addEventListener("touchend", r, false)
                }
            }
            function f(v) {
                s = p - v.touches[0].pageX;
                o = (Math.abs(s) < Math.abs(v.touches[0].pageY - n));
                if (!o) {
                    v.preventDefault();
                    var u = Number(new Date()) - q;
                    i += parseInt(Math.abs(s) * 100 / u) > 30 ? 50 : 20;
                    j++;
                    if (Math.abs(s - h) > 3) {
                        h = s;
                        var t = k + s;
                        if (d.transitions && t > -50 && Math.abs(t) < d.tw - d.w + 50) {
                            d.setProps(t, "setTouch")
                        }
                    }
                }
            }
            function r(v) {
                if (d.transitions) {
                    var t;
                    if (d.x > 0) {
                        t = 0
                    } else {
                        l = i / j;
                        var u = (Math.abs(d.x) - k) * (l > 30 ? parseInt(l / 10) : 1);
                        t = k + u
                    }
                    if (t < 0) {
                        t = 0;
                        u = -k
                    } else {
                        if (Math.abs(t) > d.tw - d.w) {
                            t = d.tw - d.w;
                            u = t - k
                        }
                    }
                    d.setProps(t, "setTouch", Math.abs(u))
                }
                c.removeEventListener("touchmove", f, false);
                c.removeEventListener("touchend", r, false);
                p = null;
                n = null;
                s = null;
                k = null
            }
        },
        resize: function() {
            if (d.is(":visible")) {
                d.doMath();
                d.setProps(0, "setTotal", 400)
            }
        }
    };
    d.setProps = function(i, f, g) {
        var h = (function() {
            var j = (function() {
                switch (f) {
                case "setTotal":
                    return (Math.abs(d.x) > d.tw - d.w) ? (d.tw - d.w < 0 ? 0 : d.tw - d.w) : Math.abs(d.x);
                case "setTouch":
                    return i;
                default:
                    return i
                }
            } ());
            d.x = j * -1;
            return d.x + "px"
        } ());
        if (d.transitions) {
            h = "translate3d(" + h + ",0,0)";
            g = (g !== undefined) ? (g / 1000) + "s": "0s";
            d.container.css("-" + d.pfx + "-transition-duration", g)
        }
        d.args[d.prop] = h;
        if (d.transitions || g === undefined) {
            d.container.css(d.args)
        }
    };
    d.setup = function() {
        d.viewport = a('<div class="flex-viewport"></div>').appendTo(d).append(d.container);
        d.w = d.viewport.width();
        d.container.width(d.tw + "px");
        var f = d.tw - d.w;
        if (f < 0) {
            d.x = 0;
            d.switchs = false;
            return
        } else {
            if (d.x >= f) {
                d.x = f
            }
        }
        d.setProps(d.x, "init")
    };
    d.doMath = function() {
        if (d.viewport) {
            d.w = d.viewport.width()
        }
        d.tw = 0;
        d.slides.each(function() {
            if (a(this).attr("class") == "cur") {
                d.x = d.tw
            }
            d.tw += a(this).outerWidth()
        })
    };
    b.init()
};
a.fn.touchslider = function() {
    return this.each(function() {
        new a.touchslider(this)
    })
}
})(jQuery);