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

ttx9n · 发表于 2006-12-22 00:00:00

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

>>点击上面的表格，可以看到行渐扩效果 
</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需刷新才能执行]

hd1tvqb3 · 发表于 2022-8-24 06:01:12

强烈支持楼主ing……

0608fv3 · 发表于 2022-9-20 15:53:24

非常vbcbvcvbvcb

6ox8dn · 发表于 2023-6-20 08:16:40

下载来瞧瞧

w18pvaep · 发表于 2023-6-24 00:25:16

需要很久了终于找到了

adm1n · 发表于 2023-7-21 20:26:24

sdsadsadsadf

小伙伴 · 发表于 2023-7-25 01:14:49

2222222222222222

z80vh · 发表于 2023-10-31 23:16:48

哦哦哦ijhhsdj

qwe520 · 发表于 2024-3-2 06:20:45

笑纳了老板

cxst1h57 · 发表于 2024-4-4 14:47:37

好人好人好人好人

账号		自动登录	找回密码
密码			立即注册

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

相关帖子