js漸變顯示漸變消失示例代碼
更新時(shí)間:2013年08月01日 15:53:13 作者:
漸變顯示漸變消失的特殊效果在使用中還是比較常見的,本文簡(jiǎn)單的實(shí)現(xiàn)了一個(gè),大家如何需要可以參考下
以下是漸變的js代碼(表示多余三行的要隱藏,點(diǎn)擊"more"顯示剩下的,點(diǎn)擊“l(fā)ess”要逐漸隱藏):
function showAccomplishmentTableRow(){
$("#accomplishmenttable tr:hidden").first().show(2000,function(){
showAccomplishmentTableRow();
});
if($("#accomplishmenttable tr:hidden").size()==0){
$("#accomplishmenttable").next().attr("onclick","hideAccomplishmentTableRow()").text("Less");
}
}
function hideAccomplishmentTableRow(){
if($("#accomplishmenttable tr:visible").size()<=3){
$("#accomplishmenttable").next().attr("onclick","showAccomplishmentTableRow()").text("More");
return;
}
$("#accomplishmenttable tr:visible").last().hide(2000,function(){
hideAccomplishmentTableRow();
});
}
html
<table id="accomplishmenttable" class="bgWhite border3PGreye7e7e7 marginT20 roundedCorner width100P">
<tbody>
<tr class="bgLightGreyf5f5f5 height40">
<th class="border_bottom3Pgreye7e7e7 border_right1Pgreye7e7e7 border_top1PWhite fontGreyGeneral textCenter roundedCorner_TL verticalMiddle width30P" colspan="2">MY ACCOMPLISHMENTS</th>
</tr>
<tr class="bgWhite height40">
<td class="border_bottom1Pgreye7e7e7 border_right1Pgreye7e7e7 fontGreyGeneral p14Font width20P">
<div class="margin5">border_bottom1Pgreye7e7e7</div>
</td>
<td class="border_bottom1Pgreye7e7e7 border_right1Pgreye7e7e7 fontGreyGeneral p14Font textLeft width80P">
border_bottom1Pgreye7e7e7
</td>
</tr>
<tr class="bgWhite height40">
<td class="border_bottom1Pgreye7e7e7 border_right1Pgreye7e7e7 fontGreyGeneral p14Font width20P">
<div class="margin5">border_bottom1Pgreye7e7e7</div>
</td>
<td class="border_bottom1Pgreye7e7e7 border_right1Pgreye7e7e7 fontGreyGeneral p14Font textLeft width80P">
border_bottom1Pgreye7e7e7
</td>
</tr>
</tbody>
</table>
<div class="floatR marginT5 p14Font textLink" onclick="showAccomplishmentTableRow();">More</div>
復(fù)制代碼 代碼如下:
function showAccomplishmentTableRow(){
$("#accomplishmenttable tr:hidden").first().show(2000,function(){
showAccomplishmentTableRow();
});
if($("#accomplishmenttable tr:hidden").size()==0){
$("#accomplishmenttable").next().attr("onclick","hideAccomplishmentTableRow()").text("Less");
}
}
function hideAccomplishmentTableRow(){
if($("#accomplishmenttable tr:visible").size()<=3){
$("#accomplishmenttable").next().attr("onclick","showAccomplishmentTableRow()").text("More");
return;
}
$("#accomplishmenttable tr:visible").last().hide(2000,function(){
hideAccomplishmentTableRow();
});
}
html
復(fù)制代碼 代碼如下:
<table id="accomplishmenttable" class="bgWhite border3PGreye7e7e7 marginT20 roundedCorner width100P">
<tbody>
<tr class="bgLightGreyf5f5f5 height40">
<th class="border_bottom3Pgreye7e7e7 border_right1Pgreye7e7e7 border_top1PWhite fontGreyGeneral textCenter roundedCorner_TL verticalMiddle width30P" colspan="2">MY ACCOMPLISHMENTS</th>
</tr>
<tr class="bgWhite height40">
<td class="border_bottom1Pgreye7e7e7 border_right1Pgreye7e7e7 fontGreyGeneral p14Font width20P">
<div class="margin5">border_bottom1Pgreye7e7e7</div>
</td>
<td class="border_bottom1Pgreye7e7e7 border_right1Pgreye7e7e7 fontGreyGeneral p14Font textLeft width80P">
border_bottom1Pgreye7e7e7
</td>
</tr>
<tr class="bgWhite height40">
<td class="border_bottom1Pgreye7e7e7 border_right1Pgreye7e7e7 fontGreyGeneral p14Font width20P">
<div class="margin5">border_bottom1Pgreye7e7e7</div>
</td>
<td class="border_bottom1Pgreye7e7e7 border_right1Pgreye7e7e7 fontGreyGeneral p14Font textLeft width80P">
border_bottom1Pgreye7e7e7
</td>
</tr>
</tbody>
</table>
<div class="floatR marginT5 p14Font textLink" onclick="showAccomplishmentTableRow();">More</div>
您可能感興趣的文章:
- js+HTML5實(shí)現(xiàn)canvas多種顏色漸變效果的方法
- js實(shí)現(xiàn)透明度漸變效果的方法
- JS實(shí)現(xiàn)進(jìn)入頁面時(shí)漸變背景色的方法
- 純js和css實(shí)現(xiàn)漸變色包括靜態(tài)漸變和動(dòng)態(tài)漸變
- js實(shí)現(xiàn)類似光照的炫彩文字漸變視覺沖擊效果
- 用js實(shí)現(xiàn)層隨著內(nèi)容大小動(dòng)態(tài)漸變改變 推薦
- 利用遞增的數(shù)字返回循環(huán)漸變的顏色的js代碼
- js運(yùn)動(dòng)動(dòng)畫的八個(gè)知識(shí)點(diǎn)
- js實(shí)現(xiàn)橫向百葉窗效果網(wǎng)頁切換動(dòng)畫效果的方法
- js實(shí)現(xiàn)按鈕顏色漸變動(dòng)畫效果
相關(guān)文章
Javascript中 帶名 匿名 箭頭函數(shù)的重要區(qū)別(推薦)
這篇文章主要介紹了Javascript中 帶名 匿名 箭頭函數(shù)的重要區(qū)別,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-01-01
用js實(shí)現(xiàn)判斷當(dāng)前網(wǎng)址的來路如果不是指定的來路就跳轉(zhuǎn)到指定頁面
用js實(shí)現(xiàn)判斷當(dāng)前網(wǎng)址的來路如果不是指定的來路就跳轉(zhuǎn)到指定頁面,需要的朋友可以參考下。2011-05-05
Javascript中找到子元素在父元素內(nèi)相對(duì)位置的代碼
因?yàn)橄胱詣?dòng)定位到子元素,所以一直在找各種找尋元素位置的代碼。 不過總是找不到可以定位子元素相對(duì)位置的代碼2012-07-07
Bootstrap基本組件學(xué)習(xí)筆記之分頁(12)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本組件學(xué)習(xí)筆記之分頁,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12
js 點(diǎn)擊a標(biāo)簽 獲取a的自定義屬性方法
下面小編就為大家?guī)硪黄猨s 點(diǎn)擊a標(biāo)簽 獲取a的自定義屬性方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11

