jquery仿百度经验滑动切换浏览效果
jquery仿百度经验滑动切换浏览效果
$(function(){
wordStrong();
$("#contentul").width($("#contentulli:first").width()*$("#contentulli").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());
varshowId=0;
$("#contentspan.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);
$("#footerli").children().removeClass("active").end().children().eq(showId).addClass("active");
center(showId);
});
$("#contentspan.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);
$("#footerli").children().removeClass("active").end().children().eq(showId).addClass("active");
center(showId);
});
functioncheckFirst(){
if($("#content").attr("showId")==0){
$("#contentspan.left").css("cursor","default");
returntrue;
}
returnfalse;
}
functioncheckLast(){
if($("#content").attr("showId")==$("#contentulli").length-1){
$("#contentspan.right").css("cursor","default");
returntrue;
}
returnfalse;
}
/*首字母大写*/
functionwordStrong(){
varliList=$("#contentulli");
for(varj=0;j<liList.length;j++){
varpList=$("#content.cont_"+(j+1)+".cont_wordp");
for(vari=0;i<pList.length;i++){
varp=pList.get(i);
varpCont=$(p).html();
vars=$("<b>"+(i+1)+"</b>");
s.css("font-size","24px");
$(p).html('');
s.appendTo(p);
$(p).append(pCont.substring(1));
}
}
}
center(0);
//相对li居中
functioncenter(liIndex){
varli=$("#contentulli").css("opacity",0.3).eq(liIndex).css("opacity",1);
$("#contentul").animate({
left:(-li.width()*liIndex)
});
}
varfootLen=$("#contentulli").length;
varfoots=$("#footerul");
for(vari=1;i<footLen-1;i++){
varchildA=$("<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);
$("#footerli").click(function(){
$("#footerulli").children().removeClass("active");
$(this).children().addClass("active");
center($(this).attr("step"));
});
functionmyAddEvent(obj,e,fn){
if(obj.attachEvent){
obj.attachEvent('on'+e,fn);
}elseobj.addEventListener(e,fn,false);
}
functiononMouseWheel(ev){
varev=ev||event;
//IE
//wheelDelta下滚：负，上滚：下
//alert(oEvent.wheelDelta);
//FF
//detail:下滚:正,上滚:负
//alert(oEvent.detail)
varbDown=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);
$("#footerulli").children().removeClass("active").end().eq(showId).children().addClass("active");
center(showId);
if(oEvent.preventDefault){
oEvent.preventDefault();
}
returnfalse;
}
myAddEvent(window,'mousewheel',onMouseWheel);
myAddEvent(window,'DOMMouseScroll',onMouseWheel);
});
以上所述就是本文给大家介绍的全部内容了，希望大家能够喜欢。