定单管理上 JS表格排序

　　自己经常用的比较好用的效果经常用在定单管理上 JS表格排序不需要用ASP再计算一次

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

　　客户需要一个这样的效果单击一个图片显示隐藏的5个导航图片

　　就是差图片渐隐渐显的效果感觉太生硬大家帮忙看看改改谢谢代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>顺序显示</title> 
<style type="text/css"> 
#container{ 
    position:absolute; 
    padding:10px; 
} 
#container li{ 
    display:none; 
    list-style:none; 
    float:left; 
    margin:5px; 
    padding:2px; 
    width:80px; 
    height:80px; 
    border:3px #ccc double; 
    font:30px Verdana, Arial, Helvetica, sans-serif; 
    color:#666; 
    background-color: #eee; 
    FILTER: alpha(opacity=50); 
} 
#container .orderly-change{ 
    border:3px #666 double; 
        FILTER: alpha(opacity=100); 
} 
</style> 
</head> 
<body> 
<a href="#" _ewebeditor_ta_href="%23" onclick="orderly_show()"><img src="http://image2.sina.com.cn/dy/temp/119/2006-02-05/U1043P1T119D48F2656DT20061025113622.jpg" _ewebeditor_ta_src="http%3A%2F%2Fimage2.sina.com.cn%2Fdy%2Ftemp%2F119%2F2006-02-05%2FU1043P1T119D48F2656DT20061025113622.jpg"  border="0" /></a> <-------点一下这张图片

</ul> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Avar%20i%3D0%2Cj%20%0D%0Afunction%20orderly_show()%7B%20%0D%0A%20%20%20%20var%20container_li%3Ddocument.getElementById(%22container%22).getElementsByTagName(%22li%22)%3B%20%0D%0A%20%20%20%20if(i%3Ccontainer_li.length)%7B%20%0D%0A%20%20%20%20%20%20%20%20container_li%5Bi%5D.style.display%3D%22block%22%3B%20%0D%0A%20%20%20%20%20%20%20%20if(j%3Ccontainer_li.length)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20container_li%5Bj%5D.className%3D%22orderly-change%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20i%2B%2B%3B%20%0D%0A%20%20%20%20%20%20%20%20j%3Di-1%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20else%20if(i%3Dcontainer_li.length)%7B%20%0D%0A%20%20%20%20%20%20%20%20container_li%5Bj%5D.className%3D%22orderly-change%22%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20setTimeout(%22orderly_show()%22%2C900)%3B%20%0D%0A%7D%20%0D%0A%2F%2Forderly_show()%3B%20%0D%0A%3C%2Fscript%3E"> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>无标题文档</title> 
</head> 
<div id="imgopacity" style="position:absolute;top:100px;"><img src="http://gg.blueidea.com/2006/feloo/380_40.jpg" _ewebeditor_ta_src="http%3A%2F%2Fgg.blueidea.com%2F2006%2Ffeloo%2F380_40.jpg" id="imga"/></div> 
<input name="btn" type="button" value="请点击我" onClick="opa();"> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22javascript%22%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%20%20var%20opa_value%3D0%3B%20%0D%0A%20%20var%20k%3D0%3B%20%0D%0A%20function%20opa()%7B%20%0D%0A%20%20%20%20%20%20%20%20if(k%3D%3D1)%7Bopa_value%3D0%3Bk%3D0%7D%20%0D%0A%20%20%20%20%20%20%20%20opa_value%2B%2B%3B%20%0D%0A%20%20%20%20%20%20%20%20if(opa_value%3E%3D100)%20%7Bopa_value%3D100%3Bk%3D1%3Breturn%3B%7D%20%0D%0A%20%20%20%20%20%20%20%20var%20opastyle%3D%22progid%3ADXImageTransform.Microsoft.Alpha(style%3D0%2Copacity%3D%22%2Bopa_value%2B%22)%22%3B%20%0D%0A%20%20%20%20%20%20%20%20document.getElementById(%22imga%22).style.filter%3Dopastyle%3B%20%0D%0A%20%20%20%20%20%20%20%20setTimeout(%22opa()%3B%22%2C10)%3B%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
<body> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程