定單管理上 JS表格排序第2/2頁

更新時(shí)間：2006年10月26日 00:00:00 作者：

客戶需要一個(gè)這樣的效果單擊一個(gè)圖片顯示隱藏的5個(gè)導(dǎo)航圖片
就是差圖片漸隱漸顯的效果感覺太生硬大家?guī)兔纯锤母?nbsp;謝謝代碼如下

<!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="#" onclick="orderly_show()"><img src="http://image2.sina.com.cn/dy/temp/119/2006-02-05/U1043P1T119D48F2656DT20061025113622.jpg"  border="0" /></a> <-------點(diǎn)一下這張圖片 <ul id="container" >   <li id="li1"><img src="http://image2.sina.com.cn/dy/z/chinaafrica/U43P1T63D2742F1244DT20061019181804.jpg" /></li>   <li id="li2"><img src="http://image2.sina.com.cn/dy/z/chinaafrica/U43P1T63D2742F1215DT20061019181804.jpg" /></li>   <li id="li3"><img src="http://image2.sina.com.cn/dy/z/chinaafrica/U43P1T63D2742F1250DT20061019180903.jpg" /></li>   <li id="li4"><img src="http://image2.sina.com.cn/dy/z/chinaafrica/U43P1T63D2742F1244DT20061019181804.jpg" /></li>   <li id="li5"><img src="http://image2.sina.com.cn/dy/z/chinaafrica/U43P1T63D2742F1249DT20061019180903.jpg" /></li>   <li id="li6"><img src="http://image2.sina.com.cn/dy/z/chinaafrica/U43P1T63D2742F1249DT20061019181804.jpg" /></li> </ul> <script type="text/javascript"> var i=0,j function orderly_show(){     var container_li=document.getElementById("container").getElementsByTagName("li");     if(i<container_li.length){         container_li[i].style.display="block";         if(j<container_li.length){             container_li[j].className="orderly-change";         }         i++;         j=i-1;     }     else if(i=container_li.length){         container_li[j].className="orderly-change";     }     setTimeout("orderly_show()",900); } //orderly_show(); </script> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

上一頁 12閱讀全文

您可能感興趣的文章:

相關(guān)文章

借助JavaScript腳本判斷瀏覽器Flash Player信息的方法
做了一個(gè)小的Demo，在測試時(shí)發(fā)現(xiàn)經(jīng)常報(bào)錯(cuò)，對此總結(jié)了一下借助JavaScript腳本判斷瀏覽器Flash Player信息的方法,需要的朋友可以參考下
2014-07-07
使用重寫url機(jī)制實(shí)現(xiàn)驗(yàn)證碼換一張功能
重寫URL機(jī)制：為了保證一個(gè)url的地址唯一，可每次向服務(wù)器傳遞的參數(shù)不一樣即可。此處在實(shí)現(xiàn)驗(yàn)證碼的換一張的功能時(shí)，就是利用了改變參數(shù)列表的值進(jìn)行刷新。具體詳細(xì)代碼大家參考下本文
2017-08-08
詳解JavaScript實(shí)現(xiàn)JS彈窗的三種方式
這篇文章主要為大家介紹了JavaScript實(shí)現(xiàn)JS彈窗的三種方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助<BR>
2022-01-01
javascript中setTimeout使用指南
本文給大家通過3個(gè)方法向大家展示了javascript中的setTimeout的使用，非常的簡單，有需要的小伙伴可以參考下。
2015-07-07
不使用jquery實(shí)現(xiàn)js打字效果示例分享
js打字效果示例js打字效果示例,data-period設(shè)置從打字返回刪字的時(shí)間，data-rotate可加減中英文詞語，不用jquery支持
2014-01-01
JS 自定義帶默認(rèn)值的函數(shù)
今天與同事一起看了一個(gè)javscript定義函數(shù)問題，如何在定義一個(gè)函數(shù)里給參數(shù)一個(gè)默認(rèn)值.
2011-07-07
基于Three.js插件制作360度全景圖
這篇文章主要介紹了基于Three.js插件制作的360度全景圖,代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-11-11
js實(shí)現(xiàn)簡潔的TAB滑動(dòng)門效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)簡潔的TAB滑動(dòng)門效果代碼,通過簡單的JavaScript自定義函數(shù)動(dòng)態(tài)遍歷頁面元素實(shí)現(xiàn)tab滑動(dòng)切換的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09
JS+HTML5 FileReader實(shí)現(xiàn)文件上傳前本地預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了JS+HTML5 FileReader實(shí)現(xiàn)文件上傳前本地預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
JavaScript中style.left與offsetLeft的使用及區(qū)別詳解
這篇文章主要介紹了JavaScript中style.left與offsetLeft的使用及區(qū)別詳解的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06