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

前端之家收集整理的这篇文章主要介绍了jquery仿百度经验滑动切换浏览效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

$("#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 wordh3() {
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 = $(""+(i+1)+"");
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 = $("").html(i);
childA.attr("href","#");
$("

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

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

    原文链接:https://www.f2er.com/jquery/54788.html

    猜你在找的jQuery相关文章