前端之js功能代码

1.右侧电话本字母检索

    var Initials=$('.initials');
        var LetterBox=$('#letter');
        Initials.find('ul').append('');//A-#
var initialsArr = [];
function initials() {//排序
    var SortList=$(".sort_list");
    var SortBox=$(".sort_box");
    SortList.sort(asc_sort).appendTo('.sort_box');//按首字母排序
    function asc_sort(a, b) {
//      console.log(a);
//      console.log(b);
        return makePy($(b).text().charAt(0))[0].toUpperCase() < makePy($(a).text().charAt(0))[0].toUpperCase() ? 1 : -1;
    }


var num=0;
initialsArr.length=0;
SortList.each(function(i) {
    var initial = makePy($(this).text().charAt(0))[0].toUpperCase();
    if(initial>='A'&&initial<='Z'){

        if (initialsArr.indexOf(initial) === -1)
            initialsArr.push(initial);

    }else{
        num++;
    }

});

$.each(initialsArr, function(index, value) {//添加首字母标签
    SortBox.append('<div class="sort_letter" id="'+ value +'">' + value + '</div>');
});
if(num!=0){SortBox.append('<div class="sort_letter" id="default">#</div>');}
for (var i =0;i<SortList.length;i++) {//插入到对应的首字母后面
    var letter=makePy(SortList.eq(i).text().charAt(0))[0].toUpperCase();
    switch(letter){
        case "A":
            $('#A').after(SortList.eq(i));
            break;
        case "B":
            $('#B').after(SortList.eq(i));
            break;
        case "C":
            $('#C').after(SortList.eq(i));
            break;
        case "D":
            $('#D').after(SortList.eq(i));
            break;
        case "E":
            $('#E').after(SortList.eq(i));
            break;
        case "F":
            $('#F').after(SortList.eq(i));
            break;
        case "G":
            $('#G').after(SortList.eq(i));
            break;
        case "H":
            $('#H').after(SortList.eq(i));
            break;
        case "I":
            $('#I').after(SortList.eq(i));
            break;
        case "J":
            $('#J').after(SortList.eq(i));
            break;
        case "K":
            $('#K').after(SortList.eq(i));
            break;
        case "L":
            $('#L').after(SortList.eq(i));
            break;
        case "M":
            $('#M').after(SortList.eq(i));
            break;
        case "N":
            $('#N').after(SortList.eq(i));
            break;
        case "O":
            $('#O').after(SortList.eq(i));
            break;
        case "P":
            $('#P').after(SortList.eq(i));
            break;
        case "Q":
            $('#Q').after(SortList.eq(i));
            break;
        case "R":
            $('#R').after(SortList.eq(i));
            break;
        case "S":
            $('#S').after(SortList.eq(i));
            break;
        case "T":
            $('#T').after(SortList.eq(i));
            break;
        case "U":
            $('#U').after(SortList.eq(i));
            break;
        case "V":
            $('#V').after(SortList.eq(i));
            break;
        case "W":
            $('#W').after(SortList.eq(i));
            break;
        case "X":
            $('#X').after(SortList.eq(i));
            break;
        case "Y":
            $('#Y').after(SortList.eq(i));
            break;
        case "Z":
            $('#Z').after(SortList.eq(i));
            break;
        default:
            $('#default').after(SortList.eq(i));
            break;
    }
};

}

2.导航栏下划线跟随

    $(function() {
    brainbow();

});

var brainbow = function init () {

  var indicate = function indicate ($e) {
    var o = $e.position(),
        h = $e.innerHeight(),
        w = $e.innerWidth(),
        t = (o.top + h-10 ),
        l = o.left;
    $(".indicator").css({
      "top":t  + "px" ,
      "left": l + "px",
      "width": w + "px",
      "height":"3px",
      'backgroundColor':'#4791EA',

    });
  };
 //点击事件
  $(".header-bottom").on("click", "li", function(e) {
    $(".header-bottom li").each(function(){
      $(this).removeClass("active");
    });
    $(this).addClass("active");
    if($(this).hasClass('header-bottom-item1')){
        window.location.href = "proIndex.html";
    }else if($(this).hasClass('header-bottom-item2')){
        window.location.href = "rainfallStatistical.html";
    }else if($(this).hasClass('header-bottom-item3')){
        window.location.href = "waterLevelStatistical.html";
    }else if($(this).hasClass('header-bottom-item4')){
        window.location.href = "stationState.html";
    }else if($(this).hasClass('header-bottom-item5')){
        window.location.href = "artificialReport.html";
    }else if($(this).hasClass('header-bottom-item6')){
    window.location.href = "dataManagement.html";
    }
  });
   //鼠标移入事件
  $(".header-bottom ul").on("mouseenter", "li", function(e) {
    indicate( $(this));
  });
  //鼠标移出事件
  $(".header-bottom ul").on("mouseleave", "li", function(e) {
    indicate( $("li.active"));
  });
  //浏览器尺寸变化事件
  $(window).resize(function(){
     indicate( $("li.active"));
  })

  /**动态创建滑动层**/
  var indicator = $("<div>").addClass("indicator");
  $('.header-bottom ul').append(indicator);

  indicate($(".header-bottom ul li.active"));
};