前端之js功能代码

来源：互联网发布：淘宝买账号的靠谱吗编辑：程序博客网时间：2024/06/15 03:10

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"));};

阅读全文

0 0