谁能帮我解释下这段js代码每行的意思?
(function($){
$.fn.mobilyselect=function(options){
var defaults={collection:"all",animation:"absolute",duration:100,listClass:"mainbest_content",btnsClass:"mainbest_selecter",btnActiveClass:"active",elements:"li",onChange:function(){},onComplete:function(){}};
var sets=$.extend({},defaults,options);
return this.each(function(){
var $t=$(this),list=$t.find("."+sets.listClass),btns=$t.find("."+sets.btnsClass),btn=btns.find("a"),li=list.find(sets.elements),w=li.width(),h=li.height(),l=li.length,finishTime;
if(sets.animation=="absolute"){li.css({position:"relative"}).children().css({position:"absolute",top:0,left:0})} //这句是标注子div滑动效果
var select={init:function(){this.start();
this.trigger()},start:function(){
if(sets.collection!="all"){
li.hide().filter("."+sets.collection).show();
btn.removeClass(sets.btnActiveClass).filter(function(){return $(this).attr("rel")==sets.collection}).addClass(sets.btnActiveClass)}},trigger:function(){btn.bind("click",function(){
var $t=$(this),rel=$t.attr("rel"),selected=li.filter("."+rel),s=li.filter(function(){return $(this).css("display")=="block"});
if(rel=="all"){if(l!=s.length){select.animation(li,li)}}
else{select.animation(li,selected)}btn.removeClass(sets.btnActiveClass);
$t.addClass(sets.btnActiveClass);sets.onChange.call(this);return false})},animation:function(not,selected){switch(sets.animation){case"plain":$(not).hide();
$(selected).show();break;case"fade":$(not).fadeOut(sets.duration);setTimeout(function(){$(selected).fadeIn(sets.duration)},sets.duration+400);break;case"absolute":setTimeout(function(){$(selected).show().children().animate({top:0,left:0},sets.duration)},sets.duration+400);
$(not).children().animate({top:-h+"px",left:-w+"px"},sets.duration,function(){$(not).hide()});break}
if(sets.animation=="absolute"||sets.animation=="fade"){finishTime=sets.duration*2+400}else{finishTime=100}setTimeout(function(){sets.onComplete.call(this)},finishTime)}};
select.init()})}}(jQuery));
补充:没财富值了- -! sorry 各位~~~满意后重谢!!!
追问:其实我想先通过实例,然后再查那些不懂的函数...感觉这样会快点..
如果根据书本的一步步来的话。。时间太长..而且比较混乱~~
答案:建议先从基础学起,很快!用点心1个星期内就可以看懂这些东东。
从上面的代码来看,给你几点建议。
先了解JS里的对象。其书写格式,引用方式!比如第三行的defaults!
然后就是你需要相当熟悉JQ的语法。不知道你有没有相关基础!
上面的代码里涉及了一些JQ的特效。
不过万变不离:
1.标签选择器。
2.属性与方法的作用!主要是方法。eg:上述代码中的each(),addClass(),show(),animate()等方法
3.CSS样式表的样式属性!
总结的很潦草,欢迎批改!
其他:楼主,这么长的代码,你让别人详细讲解每一行,累死人哦!建议你去看一下JQuery语法。自己捉摸出来的才是自己的经验。《JQuery攻略》这本书还不错,不妨去读一读,然后自己动手写写里面的例子。会有收获的!
上一个:如何在js中获取下拉列表选择的值
下一个:我有个js 在ie下没有问题 但是在火狐想不能显示 代码如下