2012-01-10 自己写的基于jquery的翻页效果
生活随笔
收集整理的這篇文章主要介紹了
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>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?奢華的歲月~~~
?
轉載于:https://www.cnblogs.com/boyice/archive/2012/01/10/2318282.html
總結
以上是生活随笔為你收集整理的2012-01-10 自己写的基于jquery的翻页效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [z]Qt 内存管理机制
- 下一篇： [自己动手]让Editplus更好用