js渐变显示渐变消失示例代码
js渐变显示渐变消失示例代码
发布时间:2016-12-30 来源:查字典编辑
摘要:以下是渐变的js代码(表示多余三行的要隐藏,点击"more"显示剩下的,点击“less”要逐渐隐藏):复制代码代码如下:functionsh...

以下是渐变的js代码(表示多余三行的要隐藏,点击"more"显示剩下的,点击“less”要逐渐隐藏):

复制代码 代码如下:

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">

<tbody>

<tr>

<th colspan="2">MY ACCOMPLISHMENTS</th>

</tr>

<tr>

<td>

<div>border_bottom1Pgreye7e7e7</div>

</td>

<td>

border_bottom1Pgreye7e7e7

</td>

</tr>

<tr>

<td>

<div>border_bottom1Pgreye7e7e7</div>

</td>

<td>

border_bottom1Pgreye7e7e7

</td>

</tr>

</tbody>

</table>

<div>More</div>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类