移动标签
标签栏
当标签很多的时候，要实现左右移动。
移动模型
初次给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);
网友评论