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>


                                                                                                                                                                                                   奢華的歲月~~~

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM