熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

js漸變顯示漸變消失示例代碼

2013-11-15 12:09:35  來源: JSP教程 
漸變顯示漸變消失的特殊效果在使用中還是比較常見的本文簡單的實現了一個大家如何需要可以參考下  

  以下是漸變的js代碼(表示多余三行的要隱藏點擊"more"顯示剩下的點擊“less”要逐漸隱藏)

復制代碼 代碼如下:
function showAccomplishmentTableRow(){
$("#accomplishmenttable tr:hidden")first()show(function(){
showAccomplishmentTableRow();
});
if($("#accomplishmenttable tr:hidden")size()==){
$("#accomplishmenttable")next()attr("onclick""hideAccomplishmentTableRow()")text("Less");
}
}
function hideAccomplishmentTableRow(){
if($("#accomplishmenttable tr:visible")size()<=){
$("#accomplishmenttable")next()attr("onclick""showAccomplishmentTableRow()")text("More");
return;
}

$("#accomplishmenttable tr:visible")last()hide(function(){
hideAccomplishmentTableRow();
});

}

  
html

復制代碼 代碼如下:

  
<table id="accomplishmenttable" class="bgWhite borderPGreyeee marginT roundedCorner widthP">
<tbody>
<tr class="bgLightGreyfff height">
<th class="border_bottomPgreyeee border_rightPgreyeee border_topPWhite fontGreyGeneral textCenter roundedCorner_TL verticalMiddle widthP" colspan="">MY ACCOMPLISHMENTS</th>
</tr>

<tr class="bgWhite height">
<td class="border_bottomPgreyeee border_rightPgreyeee fontGreyGeneral pFont widthP">
<div class="margin">border_bottomPgreyeee</div>
</td>
<td class="border_bottomPgreyeee border_rightPgreyeee fontGreyGeneral pFont textLeft widthP">
border_bottomPgreyeee
</td>
</tr>
<tr class="bgWhite height">
<td class="border_bottomPgreyeee border_rightPgreyeee fontGreyGeneral pFont widthP">
<div class="margin">border_bottomPgreyeee</div>
</td>
<td class="border_bottomPgreyeee border_rightPgreyeee fontGreyGeneral pFont textLeft widthP">
border_bottomPgreyeee
</td>
</tr>
</tbody>
</table>
<div class="floatR marginT pFont textLink" onclick="showAccomplishmentTableRow();">More</div>


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20415.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.