2012-01-10 自己写的基于jquery的翻页效果
生活随笔
收集整理的這篇文章主要介紹了
2012-01-10 自己写的基于jquery的翻页效果
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
是不是啊~~這么一轉(zhuǎn)眼，四個(gè)月就沒了~~~身為碼農(nóng)的我。哎。。 ?加油吧。。。
正文： ? ? 一個(gè)好看的用jquery做的打招呼 ?（第一次自己寫啊，里面的翻頁效果，初級(jí)初級(jí)~~呵呵）
?
?
首頁 這個(gè)設(shè)計(jì) 哎~~給力 花錢的就是不一樣~~
文件已經(jīng)打包?下載~~下面只是說jquery~~（是不是敲代碼的記憶會(huì)下降？總感覺記不住東西哎~~）
下面看看里面的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";
}
}
//-->這就是導(dǎo)航的切換效果，循環(huán)判斷下li的隱藏很顯示
</script>
</head>
<body>
<script>
$(function(){
$(".wenben").focus(function(){
$(this).css("color","black")
})
$(".wenben").blur(function(){
$(this).css("color","#D1D1D1")
})
})這里是輸入框的焦點(diǎn)聚集和離開的效果（文字框選中打字時(shí)候變色）
var i = 0; 這玩意剛開始忘定義了，nnd 害我想了半天
$(function(){
$(".pz_greet_showpage div:first").addClass("addRed") 找到pz_greet_showpage 下的第一個(gè)div，添加紅色（這是伴隨翻頁時(shí)候翻頁變色的效果） $("#bb_next").click(function(){ 這里就是開始點(diǎn)擊下頁的效果 if(!$("#"+"bb"+i).is(":animated")){判斷動(dòng)畫是否結(jié)束
if(i==4)我這邊是寫了五個(gè)頁所以這是4~~當(dāng)用戶點(diǎn)擊到最后一頁的時(shí)候，發(fā)生的行為是回到首頁
{ i=0;
$("#bb1").fadeIn(200);這個(gè)是jquery的淡入的一個(gè)函數(shù)
$("#bb5").hide(); 頁碼5隱藏 頁碼1淡入
}else{
i=i+1;不在最后一頁的時(shí)候每一次點(diǎn)擊都發(fā)生下面的效果
$("#"+"bb"+i).fadeOut(200);淡出
$("#"+"bb"+(i+1)).fadeIn(200);
$(".pz_greet_showpage div:first").removeClass("addRed")去掉第一個(gè)紅色的背景 ，
}
}// if over
$(".pz_greet_showpage").find("div").eq((i)).addClass("addRed")
.siblings().removeClass("addRed") 每一次點(diǎn)擊 div==i 的框框的背景增加上addRed的樣式，同輩的元素則去掉
}
)
$("#bb_pre").click(function(){ 這和上面的相反 呵呵~~懶人我一個(gè)
if(!$("#"+"bb"+i).is(":animated")){
if(i==0)
{ i=4;//點(diǎn)擊四下到頭
$("#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>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?奢華的歲月~~~
?
轉(zhuǎn)載于:https://www.cnblogs.com/boyice/archive/2012/01/10/2318282.html
總結(jié)
以上是生活随笔為你收集整理的2012-01-10 自己写的基于jquery的翻页效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [z]Qt 内存管理机制
- 下一篇： [自己动手]让Editplus更好用