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

曾经在一个flash RIA站点上看到这种效果，视觉效果真不错。flash开发者大概也以此来表明，flash做的应用程序，在动态效果上要优于js（个人观点）。后来我在做bmail的时候，用gif动画作为背景，基本实现了这一功能，但总是感到不太完美。这次的做法是用滤镜，视觉上比较平滑，还省了图片下载的麻烦。

#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}

寄件人 主题 日期 大小
关羽 大意失荆州 8月7日 4k
张飞 长板坡一吼，吓退十万雄兵 3月24日 5k
赵云 最帅莫过赵子龙 3月24日 3k

>>点击上面的表格，可以看到行渐扩效果

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


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

赞 (0)

相关推荐

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

    曾经在一个flash RIA站点上看到这种效果,视觉效果真不错.flash开发者大概也以此来表明,flash做的应用程序,在动态效果上要优于js(个人观点).后来我在做bmail的时候,用gif动画作为背景,基本实现了这一功能,但总是感到不太完美.这次的做法是用滤镜,视觉上比较平滑,还省了图片下载的麻烦. #tbList th{text-align:left;padding-left:20;border:1px solid white;border-right:1px solid #7994BF

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

    曾经在一个flash RIA站点上看到这种效果,视觉效果真不错.flash开发者大概也以此来表明,flash做的应用程序,在动态效果上要优于js(个人观点).后来我在做bmail的时候,用gif动画作为背景,基本实现了这一功能,但总是感到不太完美.这次的做法是用滤镜,视觉上比较平滑,还省了图片下载的麻烦. #tbList th{text-align:left;padding-left:20;border:1px solid white;border-right:1px solid #7994BF

  • jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】

    jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】

    本文实例讲述了jQuery实现表格隔行及滑动,点击时变色的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu

  • JS实现输入框提示文字点击时消失效果

    本文实例讲述了JS实现输入框提示文字点击时消失效果.分享给大家供大家参考,具体如下: 在网页登陆框里的输入框里常常会看到提示你输入什么内容的字样颜色比较淡的,这个就是"文本框点击时文字消失,失去焦点时文字出现"这个效果:这个效果用个JS就可以完成,这个效果是做网站的人必备的JS代码:自己会写JS的写写也快,不会写的就需要代码收集以作备用,用到的时候就方便多了. 下面就是这个效果实现用到的JS代码: <script language="JavaScript" t

  • 自定义Toast工具类ToastUtil防止多次点击时Toast不消失的方法

    有时候我们点击一个按钮出现toast但是当不小心多次点击时,toast会重复出现,这时候通过下面的ToastUtil类可以实现不小心多次点击的问题. public class ToastUtil { /* private Context context; public ToastUtil(Context context) { this.context=context; }*/ private static Toast toast; public static void showToast(Con

  • Android百度地图实现搜索和定位及自定义图标绘制并点击时弹出泡泡

    Android百度地图实现搜索和定位及自定义图标绘制并点击时弹出泡泡

    一.问题描述 上一次我们使用百度地图实现基本的定位功能,接下来我们继续实现搜索和定位,并使用LocationOverlay绘制定位位置,同时展示如何使用自定义图标绘制并点击时弹出泡泡 如图所示: 二.编写MyApplication类 public class MyApplication extends Application { private static MyApplication mInstance = null; public boolean m_bKeyRight = true; pu

  • 输入框点击时边框变色效果的实现方法

    实例如下: <!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="Co

  • jquery实现表格中点击相应行变色功能效果【实例代码】

    jquery实现表格中点击相应行变色功能效果【实例代码】

    对于一个表格,为了使我们选中的项更容易区分,需要为选中项添加高亮,同时也需要,将其他项的高亮形式去除.类似于: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <link href=&

  • 文本框点击时文字消失，失去焦点时文字出现

    文本框点击时文字消失,失去焦点时文字出现 function addListener(element,e,fn){ if(element.addEventListener){ element.addEventListener(e,fn,false); } else { element.attachEvent("on" + e,fn); } } var myinput = document.getElementById("myinput"); addListener(m

  • Android编程简单实现ImageView点击时背景图修改的方法

    本文实例讲述了Android编程简单实现ImageView点击时背景图修改的方法.分享给大家供大家参考,具体如下: 在使用ImageView时,当被点击时,希望背景图修改一下,这样显示被点击效果明显一些.在这里,一个很简单的方法,最起码是个很清晰的方法.在res/drawable文件夹下创建一个xml文件.比如my.xml,内容如下: <?xml version="1.0" encoding="utf-8"?> <selector xmlns:an

随机推荐