实现表格中行点击时的渐扩效果！

更新时间：2006年12月22日 00:00:00 作者：

曾经在一个flash 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> <body style=font-size:12> <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>  >>点击上面的表格，可以看到行渐扩效果 </body> <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>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

实现表格中行点击时的渐扩效果！

相关文章

JavaScript高级编程之Array的用法总结
这篇文章主要为大家介绍了JavaScript中Array常见用法的总结，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-11-11
axios利用params/data发送参数给springboot controlle的正确获取方式
这篇文章主要给大家介绍了关于axios利用params/data发送参数给springboot controlle的正确获取方式,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2022-02-02
Javascript仿PHP $_GET获取URL中的参数
这篇文章主要介绍了Javascript仿PHP $_GET获取URL中的参数代码实例,需要的朋友可以参考下
2014-05-05
JavaScript中三种常见的排序方法
本篇文章主要介绍了JavaScript中三种常见的排序方法：快速排序、插入排序、冒泡排序，具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
js 数组操作之pop,push,unshift,splice,shift
本篇文章主要介绍了js数组操作之pop,push,unshift,splice,shift。需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
获取阴历（农历）和当前日期的js代码
这篇文章主要为大家详细介绍了获取阴历（农历）日期的js代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-02-02
JS给元素注册事件的代码
麦鸡的TAB切换功能代码
2008-10-10
JavaScript 解析数学表达式的过程详解
这篇文章主要介绍了JavaScript 解析数学表达式的过程详解,本文以一个的解题思路，来分享如何解决问题，解决的过程，可以作为解决工作中一般问题的通用思路，对js解析表达式相关知识感兴趣的朋友一起看看吧
2022-06-06
js中关于一个分号的崩溃示例
下面的js代码不管if条件的结果是true还是false都会执行大括号的代码，结果发现if条件括号后面多写了分号，崩溃啊
2013-11-11
当鼠标滑过文本框自动选中输入框内容的JS代码分享
这篇文章主要介绍了当鼠标滑过文本框自动选中输入框内容的JS代码，有需要的朋友可以参考一下
2013-11-11

最新评论