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

更新时间：2007年01月08日 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 TypeScript实现贪吃蛇游戏完整详细流程
这篇文章主要介绍了JavaScript TypeScript实现贪吃蛇游戏流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2022-09-09
使用url-loader处理图片等资源文件的方法步骤
在Web开发中,处理图片、字体等资源文件是一个常见的需求,传统的做法是将这些资源文件放在静态目录中,然后在HTML或CSS中引用,然而,这种方法在构建工具（如Webpack）中并不总是最理想的,为了解决这个问题,可以使用url-loader,需要的朋友可以参考下
2025-04-04
use jscript with List Proxy Server Information
use jscript with List Proxy Server Information...
2007-06-06
JavaScript常见继承模式实例小结
这篇文章主要介绍了JavaScript常见继承模式,结合实例形式总结分析了javascript原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承等相关实现技巧与操作注意事项,需要的朋友可以参考下
2019-01-01
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
本篇文章是对使用javascript:将其它类型值转换成布尔类型值的解决方法进行了详细的分析介绍。需要的朋友参考下
2013-05-05
一个仿微博登陆邮箱提示框js开发案例
这篇文章主要为大家详细介绍了一个仿邮箱登录提示框js开发案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-07-07
Javascript中函数分类&this指向的实例详解
其实想要彻底理解js中this的指向，不必硬背，这篇文章主要给大家介绍了关于Javascript中函数分类&this指向的相关资料,需要的朋友可以参考下
2021-05-05
Javascript实现带关闭按钮的网页漂浮广告代码
带有关闭功能的漂浮图片的实现方法有很多，下面为大家介绍下使用Javascript是如何实现的，喜欢的额朋友可以了解下
2014-01-01
Android 自定义view仿微信相机单击拍照长按录视频按钮
这篇文章主要介绍了Android 自定义view仿微信相机单击拍照长按录视频按钮，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2019-07-07
js实现非常简单的焦点图切换特效实例
这篇文章主要介绍了js实现非常简单的焦点图切换特效,是一个非常简单的js焦点图切换效果,涉及javascript操作鼠标事件与图片的相关技巧,需要的朋友可以参考下
2015-05-05

最新评论