테이블의 행을 클릭할 때 점진적 확장 효과를 얻는 방법! _자바스크립트 기술

플래시 RIA 사이트에서 이 효과를 본 적이 있습니다. 시각적 효과가 정말 좋습니다. Flash 개발자는 아마도 Flash로 만든 애플리케이션이 동적 효과 측면에서 js보다 우수하다는 것을 보여주기 위해 이것을 사용할 것입니다(개인 의견). 나중에 bmail 작업을 하다가 gif 애니메이션을 배경으로 해서 이 기능을 기본적으로 구현해 냈는데, 늘 완벽하지 않다는 생각이 들었습니다. 이번에는 시각적으로 더 매끄럽고 이미지를 다운로드하는 수고를 덜 수 있는 필터를 사용했습니다.

<style> #tbList th{text-align:left;padding-left:20;border:1px solid white;border-right:1px solid #7994BF;border-bottom:1px solid #7994BF} #tbList td{padding-left:6;border-top:1px solid white;border-bottom:1px solid #CDD0E1} </style> <table id="tbList" cellpadding="0" cellspacing="0" width="100%" style="cursor:default;font-size:12"> <tr height="25" bgcolor="#C1D1EA"> <th width="160">寄件人</th> <th>主题</th> <th width="90">日期</th> <th width="90">大小</th> </tr> <tr height="25"> <td>关羽</td> <td>大意失荆州</td> <td>8月7日</td> <td>4k</td> </tr> <tr height="25"> <td>张飞</td> <td>长板坡一吼，吓退十万雄兵</td> <td>3月24日</td> <td>5k</td> </tr> <tr height="25"> <td>赵云</td> <td>最帅莫过赵子龙</td> <td>3月24日</td> <td>3k</td> </tr> </table> >>위 표를 클릭하시면 행이 점차 확대되는 효과를 보실 수 있습니다.
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다

]<script> document.getElementById("tbList").onmousedown=function(e){ var tb=this,tr,ee ee=e==null?event.srcElement:e.target if(ee.tagName!="TD") return tr=ee.parentNode if(tb.selRow!=null) setTrReveal(tb.selRow,"background:white",1) setTrReveal(tr,"background:#EAEAEA") tb.selRow=tr } function setTrReveal(tr,css,noDelay){ var i if(!document.all) return tr.style.cssText+=";"+css for(i=0;i< tr.cells.length;i++){ if(noDelay){ tr.cells[i].style.cssText+=";"+css continue } tr.cells[i].style.filter="progid:DXImageTransform.Microsoft.RevealTrans(duration=0.5,transition=16)" tr.cells[i].filters[0].apply() tr.cells[i].style.cssText+=";"+css tr.cells[i].filters[0].play() } } </script>