zoukankan      html  css  js  c++  java
  • js渐变显示渐变消失

    以下是渐变的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" 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>
    				


  • 相关阅读:
    【剑指offer】面试题16、反转链表
    【剑指offer】面试题15、链表中倒数第 K 个结点
    【剑指offer】面试题14、调整数组顺序使奇数位于偶数前面
    oracle sql与调优
    linux 常用命令记录 持续更新
    函数重载中形参的const
    mem_fun_ref和mem_fun的用法
    c++风格的格式化输出
    count_if函数里面的第三个参数的书写方式<<0926
    操作符重载(++,+,输入输出,强制类型转换)
  • 原文地址:https://www.cnblogs.com/dyllove98/p/3231155.html
Copyright © 2011-2022 走看看