常用JS效果 不断进步贴 不停更新~ 纪念用~

常用效果 JS  都是Jquery  没有特殊说明

1.选项卡  用的JQuery  以后学好点再来对比 看下 

/*
* @parent 最外层父级元素
* @EventElement  触发事件元素
* @EventType 事件类型
* @addClass 添加样式
* @contentElement 内容元素
* @addContentClass 内容元素添加样式
* */
function hd(parent,EventElement,EventType,addClass,contentElement,addContentClass){
    var sonNum =$(EventElement).length;
    $(parent).delegate(EventElement,EventType,function(){
        $(this).addClass(addClass).siblings().removeClass();
        //获取点击元素 在同辈元素索引位置
        var index =$(this).index();

       $(contentElement).eq(index).addClass(addContentClass).siblings().removeClass(addContentClass);
 })

}
hd(".content",".tab-hd-click li","click","tab-on",".content-list li","show");

感觉应该还是可以在写好点的~ 以后一点点的发现在说了~

 

2.点击 显示隐藏  点击一次显示 再点击一次隐藏 默认CSS 触发元素隐藏 JS点击事件 判断display属性值 进行显示

/*
* 点击显示隐藏
* @clickEle  触发元素
* @showEle  改变元素 show hide
* */
 function showOneClick(clickEle,showEle){
    var click =$(clickEle),show=$(showEle);

     click.click(
             function(){


                 $(showEle).css('display') == 'none'? show.show() : show.hide();

             }
     )

 }

  showOneClick("#btnRvw","#rvwbox");
showOneClick("#btnQue","#quebox");

 3.两端对齐 写的也不知道啥 等有空来重新整理

贴个要实现的效果图

    var list0 =AllDLcontent();

    function alignDL1200(dl_start_num,dl_end_num,bar_index,dl_num){

        /*每一排5个*/

     var list = list0[dl_start_num]+list0[dl_start_num+1]+list0[dl_start_num+2]+list0[dl_start_num+3]+list0[dl_start_num+4];
        $('.list-bar').eq(bar_index).after("<div style='width: 1250px;overflow: hidden;margin: 0px auto; padding-left: 47px;'>"+list+"</div>");
    }
   alignDL1200(0,5,0,5); //  0 1 2 3 4
   alignDL1200(5,10,1,5);//  5 6 7 8 9
   alignDL1200(10,15,2,5);// 10 11 12 13 14
    alignDL1200(15,20,3,5);// 15 16 17 18 19
    alignDL1200(20,25,4,5);// 20 21 22 23 24
    alignDL1200(25,30,5,5);// 25 26 27 28 29
    alignDL1200(30,35,6,5);// 30 31 32 33 34
    alignDL1200(35,40,7,5);// 35 36 37 38 39
    alignDL1200(40,45,8,5);// 40 41 42 43 44




  function AllDLcontent(){
      
      var arr = new Array(), dl = $('.prod-box'),num= dl.length;
      $('.prod-box').remove();

     for(i=0,ii=num;i<ii;i++){
          var content =  dl.eq(i).html();

          var dl_content ='<dl class="prod-box" positiontag="">'+content+'</dl>';
          arr[i]=dl_content;
       }
      return arr;

  }