js渐变显示渐变消失示例代码_javascript技巧
程序员文章站
2022-05-16 19:09:28
...
以下是渐变的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()$("#accomplishmenttable").next().attr("onclick","showAccomplishmentTableRow()").text("More");
return;
}
$("#accomplishmenttable tr:visible").last().hide(2000,function(){
hideAccomplishmentTableRow();
});
}
html
复制代码 代码如下:
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()$("#accomplishmenttable").next().attr("onclick","showAccomplishmentTableRow()").text("More");
return;
}
$("#accomplishmenttable tr:visible").last().hide(2000,function(){
hideAccomplishmentTableRow();
});
}
html
复制代码 代码如下:
MY ACCOMPLISHMENTS | |
---|---|
border_bottom1Pgreye7e7e7 | border_bottom1Pgreye7e7e7 |
border_bottom1Pgreye7e7e7 | border_bottom1Pgreye7e7e7 |
More
推荐阅读
-
js实现点小图看大图效果的思路及示例代码_javascript技巧
-
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例_html5教程技巧
-
js取消单选按钮选中示例代码_javascript技巧
-
js取消单选按钮选中示例代码_javascript技巧
-
js Html结构转字符串形式显示代码_javascript技巧
-
Js实现双击鼠标自动滚动屏幕的示例代码_javascript技巧
-
js禁止回车提交表单的示例代码_javascript技巧
-
JS 实现Table相同行的单元格自动合并示例代码_javascript技巧
-
js禁止回车提交表单的示例代码_javascript技巧
-
js Html结构转字符串形式显示代码_javascript技巧