Question

jquery代码看不懂。请高人帮我分析下以下代码。如有详细说明感激不尽！

var msn = msn || {};
msn.hp = msn.hp || {};
msn.hp.tab = {
t: null,
delayTime: 150,
fx: true,
tab: function(b) {
$(b).siblings().removeClass("on");
$(b).addClass("on");
var c = $(b).parents(".tab").find("div.t");
var a = c.eq($(b).index());
c.addClass("none");
a.removeClass("none");
if (this.fx) {
if ($(b).parent().hasClass("nofx")) {
return
}
$(b).parent().siblings(".animate").width($(b).outerWidth() - 2).animate({
left: $(b).position().left
},
"slow")
}
},
delayTab: function(b, a) {
clearTimeout(b.t);
this.t = setTimeout(function() {
b.tab(a)
},
this.delayTime)
},
init: function() {
var a = this;
a.animate();
if (window.Touch) {
$(".tab .main_title>ul>li[class!=\'on\']>a").click(function() {
return false
})
}
$(".tab .main_title>ul>li,.tab>ul.hotread_menu>li").hover(function() {
a.delayTab(a, this)
},
function() {
clearTimeout(a.t)
})
},
animate: function() {
if (!this.fx) {
return
}
$(".tab .main_title>ul").each(function() {
if (!$(this).hasClass("nofx")) {
$(this).addClass("fx")
}
});
$(".tab .main_title").each(function(a, b) { if ($(this).find("ul").hasClass("nofx")) { return } $(b).append("<div class=\'animate\' ></div>"); $(b).find(".animate").width($(b).find("ul>li.on").outerWidth() - 2).css("left", $(b).find("ul>li.on").position().left) }) }};$(document).ready(function() { var a = msn.hp; a.tab.init();});

Answer 1

这是一个不完善的 jquery的 扩展, 用于实现 TAB Page 效果.

jQuery 要学好, 重点在理解 selector 语法/事件绑定, 其他就简单了. 基本参考在这里:
http://jquery.org.cn/manual/
建议找本书, 将jQuery的各个要点都全部看一遍, 看完后再看这些所谓的"插件" 就简单的一米了.

这些UI插件, 建议直接上 jquery.ui, 或 easyui 等完整的 jquery 插件包, 不要动找一个西找一个, 代码质量参差不齐, 维护也麻烦.

Answer 2

这个滑动门写的太复杂了，找个简单点的吧！ 要自动播放功能的话你就找个滑动门插件，研究下jquery插件机制，你很快就能写插件了，其实挺简单的