<!DOCTYPE html><html> <head> <meta charset="utf-8"><title></title><link rel="stylesheet" href="<?php echo base_url() . 'style/css/pingmu.css'?>"> </head> <body><div id="demo" onmouseover="clearInterval(timer)" onmouseout="timer=setInterval(mar,30)" style="overflow:hidden; height:200px; width:1280px;"> <div id="demo1"> <table class="table" id="tableid" rules="all"> <tbody><tr style="height:100px;"> <td style="width:100px;"> 第四联合 运行部</td> <td> ★★★ </td> <td> 2#制氢装置阻火器伴热线堵漏 </td> <td> 一级动火,高处作业,临时用电 </td> <td> 火灾,爆炸,触电,灼烫,物体打击,高处坠落,滑跌 </td> <td> tt </td> <td> tt </td> </tr> <tr style="height:100px;"> <td style="width:100px;"> 动力运行部</td> <td> ★ </td> <td> 采暖系统管网冲水试压 </td> <td> 生产及辅助系统开工 </td> <td> 动力系统波动 </td> <td> tt </td> <td> tt </td> </tr> <tr style="height:100px;"> <td style="width:100px;"> 动力运行部</td> <td> ★★ </td> <td> 采暖系统管网冲水试压 </td> <td> 生产及辅助系统开工 </td> <td> 动力系统波动,物体打击,环境污染 </td> <td> tt </td> <td> tt </td> </tr> </tbody></table> </div> <div id="demo2"></div> </div> <script> var t=getid("demo"),t1=getid("demo1"),t2=getid("demo2"),sh=getid("show"),timer; t2.innerHTML=t1.innerHTML; function mar(){ if(t2.offsetTop<=t.scrollTop) t.scrollTop-=t1.offsetHeight; else t.scrollTop++; } timer=setInterval(mar,30); function getid(id){ return document.getElementById(id); } </script> </body></html> |
1 2 3 4 5 6 7 8 9 10 11 12 | var t=getid("demo"),t1=getid("demo1"),t2=getid("demo2"),sh=getid("show"),timer; t2.innerHTML=t1.innerHTML; function mar(){ if(t2.offsetTop<=t.scrollTop) t.scrollTop-=t1.offsetHeight; else t.scrollTop++; } timer=setInterval(mar,30); function getid(id){ return document.getElementById(id); } |
上面分别是html和js代码
表格部分是从数据库获取的所以不一定几行数据，想实现如果demo1<=demo的时候，把demo1不动
如果demo1>demo执行
1 | timer=setInterval(mar,30); |
使demo1循环滚动
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/2249/viewspace-3149460/ ，如需转载，请注明出处，否则将追究法律责任。
请登录后发表评论
登录
全部评论
