首页 > 编程 > JavaScript > 正文

jquery仿百度经验滑动切换浏览效果

2019-11-20 12:40:38
字体:
来源:转载
供稿:网友

jquery仿百度经验滑动切换浏览效果

$(function() {  wordStrong();  $("#content ul").width($("#content ul li:first").width()*$("#content ul li").length);  $("#header .top_right .vote").hover(function() {    $(this).children(".hover-tip").css("display", "block");    $(this).children(".num").css("display", "none");    }, function() {    $(this).children(".hover-tip").css("display", "none");    $(this).children(".num").css("display", "block");    });        $("#content .left, #content .right").width(($(document).width()-$("#content").width())/4);  $("#content .left").css("left", -$("#content .left").width());  $("#content .right").css("right", -$("#content .right").width());     var showId = 0;  $("#content span.left").hover(function() {    if ( checkFirst() ) return ;    $(this).css("cursor", "pointer");    $(this).siblings(".sl").stop().animate({      opacity:0.5     });   }, function() {    $(this).siblings(".sl").stop().animate({      opacity:0    });   }).click(function() {    if ( checkFirst() ) return ;    showId --;    $("#content").attr("showId", showId);    $("#footer li").children().removeClass("active").end().children().eq(showId).addClass("active");    center(showId);  });     $("#content span.right").hover(function() {    if ( checkLast() ) return ;    $(this).css("cursor", "pointer");    $(this).siblings(".sr").stop().animate({      opacity:0.5    });   }, function() {    $(this).siblings(".sr").stop().animate({      opacity:0    });   }).click(function() {    if ( checkLast() ) return ;      showId ++;       $("#content").attr("showId", showId);    $("#footer li").children().removeClass("active").end().children().eq(showId).addClass("active");    center(showId);   });     function checkFirst() {    if ( $("#content").attr("showId") == 0 ) {      $("#content span.left").css("cursor", "default");      return true;        }    return false;  }     function checkLast() {    if ( $("#content").attr("showId") == $("#content ul li").length-1 ) {      $("#content span.right").css("cursor", "default");      return true;        }    return false;    }       /* 首字母大写 */  function wordStrong() {    var liList = $("#content ul li");    for (var j = 0; j < liList.length; j ++) {      var pList = $("#content .cont_"+(j+1)+" .cont_word p");      for (var i = 0; i < pList.length; i ++) {        var p = pList.get(i);        var pCont = $(p).html();            var s = $("<b>"+(i+1)+"</b>");        s.css("font-size", "24px");           $(p).html('');        s.appendTo(p);        $(p).append(pCont.substring(1));          }    }  }       center(0);     //相对li居中  function center(liIndex) {    var li = $("#content ul li").css("opacity", 0.3).eq(liIndex).css("opacity", 1);    $("#content ul").animate({      left: (-li.width()*liIndex)    });  }     var footLen = $("#content ul li").length;  var foots = $("#footer ul");  for (var i = 1; i < footLen-1; i ++) {    var childA = $("<a>").html(i);    childA.attr("href", "#");    $("<li>").append(childA).insertBefore(foots.children("[step=last]")).attr("step", i);     }  foots.children(":last").attr("step", footLen-1);  foots.css("left", ($(window).width()-foots.width())/2);   $("#footer li").click(function() {    $("#footer ul li").children().removeClass("active");    $(this).children().addClass("active");    center($(this).attr("step"));  });     function myAddEvent(obj, e, fn) {    if ( obj.attachEvent ) {      obj.attachEvent('on'+e, fn);    }else obj.addEventListener(e, fn, false);  }     function onMouseWheel(ev) {     var ev = ev||event;       //IE    //wheelDelta  下滚:负, 上滚:下    //alert(oEvent.wheelDelta);    //FF    //detail:  下滚:正, 上滚: 负    //alert(oEvent.detail)       var bDown = true;    if ( ev.wheelDelta ) {      bDown = ev.wheelDelta<0;    }else {      bDown = ev.detail>0;    }        if ( !bDown ) {      if ( checkFirst() ) return ;      showId --;         }    else {      if ( checkLast() ) return ;      showId ++;         }    $("#content").attr("showId", showId);    $("#footer ul li").children().removeClass("active").end().eq(showId).children().addClass("active");    center(showId);    if ( oEvent.preventDefault ) {      oEvent.preventDefault();    }    return false;  }     myAddEvent(window, 'mousewheel', onMouseWheel);  myAddEvent(window, 'DOMMouseScroll', onMouseWheel);});

以上所述就是本文给大家介绍的全部内容了,希望大家能够喜欢。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表