2012-01-10 自己写的基于jquery的翻页效果
是不是啊~~这么一转眼，四个月就没了~~~身为码农的我。哎。。 加油吧。。。
正文： 一个好看的用jquery做的打招呼 （第一次自己写啊，里面的翻页效果，初级初级~~呵呵）
首页 这个设计 哎~~给力 花钱的就是不一样~~
文件已经打包 下载~~下面只是说jquery~~（是不是敲代码的记忆会下降？总感觉记不住东西哎~~）
下面看看里面的jquery
<script>
<!--
/*第一种形式 第二种形式 更换显示样式*/
function setTab(m,n){
var tli=document.getElementById("menu"+m).getElementsByTagName("li");
var mli=document.getElementById("main"+m).getElementsByTagName("ul");
for(h=0;h<tli.length;h++){
tli[h].className=h==n?"hover":"";
mli[h].style.display=h==n?"block":"none";
}
}
//-->这就是导航的切换效果，循环判断下li的隐藏很显示
</script>
</head>
<body>
<script>
$(function(){
$(".wenben").focus(function(){
$(this).css("color","black")
})
$(".wenben").blur(function(){
$(this).css("color","#D1D1D1")
})
})这里是输入框的焦点聚集和离开的效果（文字框选中打字时候变色）
var i = 0; 这玩意刚开始忘定义了，nnd 害我想了半天
$(function(){
$(".pz_greet_showpage div:first").addClass("addRed") 找到pz_greet_showpage 下的第一个div，添加红色（这是伴随翻页时候翻页变色的效果）
$("#bb_next").click(function(){ 这里就是开始点击下页的效果
if(!$("#"+"bb"+i).is(":animated")){判断动画是否结束
if(i==4)我这边是写了五个页所以这是4~~当用户点击到最后一页的时候，发生的行为是回到首页
{ i=0;
$("#bb1").fadeIn(200);这个是jquery的淡入的一个函数
$("#bb5").hide(); 页码5隐藏 页码1淡入
}else{
i=i+1;不在最后一页的时候每一次点击都发生下面的效果
$("#"+"bb"+i).fadeOut(200);淡出
$("#"+"bb"+(i+1)).fadeIn(200);
$(".pz_greet_showpage div:first").removeClass("addRed")去掉第一个红色的背景 ，
}
}// if over
$(".pz_greet_showpage").find("div").eq((i)).addClass("addRed")
.siblings().removeClass("addRed") 每一次点击 div==i 的框框的背景增加上addRed的样式，同辈的元素则去掉
}
)
$("#bb_pre").click(function(){ 这和上面的相反 呵呵~~懒人我一个
if(!$("#"+"bb"+i).is(":animated")){
if(i==0)
{ i=4;//点击四下到头
$("#bb5").fadeIn(200);
$("#bb1").hide();
}else{
$("#"+"bb"+(i+1)).fadeOut(200);
$("#"+"bb"+i).fadeIn(200);
i=i-1;
$(".pz_greet_showpage div:first").removeClass("addRed");
}
}// if over
$(".pz_greet_showpage").find("div").eq((i)).addClass("addRed")
.siblings().removeClass("addRed")
}
)
})
</script>
奢华的岁月~~~
