Table实现tr数据滚动

来源：互联网发布：不需要网络的电脑游戏编辑：程序博客网时间：2024/05/19 01:59

先定义对象fontUpRoll及属性

/*文字上下滚动*/
function fontUpRoll(dom,tableH){
    this.dom = $(dom);
    //this.h = this.dom.height();
this.h = tableH;
    this.timer = null;
this.init();
}
fontUpRoll.prototype = {
    constructor: fontUpRoll,
    init: function(){
        this.dom.append(this.dom.html());
        this.play();
        this.hover();
    },
    play: function(){
        var that = this;
        this.timer = setInterval(function(){
            that.dom.css('margin-top', parseInt(that.dom.css('margin-top')) - 1 + 'px');
            if(parseInt(that.dom.css('margin-top')) == -that.h){
                that.dom.css('margin-top', 0);
            }
        }, 50)
    },
hover: function(){
  var that = this;
  this.dom.hover(
   function(){
    clearInterval(that.timer);
         },
   function(){
             that.play();
         }
  );
}
}

后使用该方法

var tableH;
tableH=$('.jzBox .table_02 table tr').length*24;
/*文字上下滚动*/
var fontUpRoll_01 = new fontUpRoll('.table_02 table',tableH);

html文件代码：

<div class="table_02">
        <span>成员单位：</span>
        <table width="100%" border="1">
        <tr>
          <th width="18%"></th>
          <td width="24%"><a href="http://www.wenming.cn/" target="_blank">中央宣传部</a></td>
          <td width="21%"><a href="http://www.chinapeace.gov.cn/" target="_blank">中央综治办</a></td>
          <td><a href="http://www.sdpc.gov.cn/" target="_blank">发展和改革委</a></td>
        </tr>
        <tr>
          <td> </td>
          <td><a href="http://www.miit.gov.cn/n11293472/index.html" target="_blank">工业和信息化部</a></td>
          <td><a href="http://www.mps.gov.cn/n16/index.html" target="_blank">公安部</a></td>
          <td><a href="http://www.moj.gov.cn/" target="_blank">司法部</a></td>
        </tr>

        <tr>
          <td> </td>
          <td><a href="http://www.mof.gov.cn/index.htm" target="_blank">财政部</a></td>
          <td><a href="http://www.mep.gov.cn/" target="_blank">环境保护部</a></td>
          <td><a href="http://www.moa.gov.cn/" target="_blank">农业部</a></td>
        </tr>
        <tr>
          <td> </td>
          <td><a href="http://www.mofcom.gov.cn/" target="_blank">商务部</a></td>
          <td><a href="http://www.mcprc.gov.cn/" target="_blank">文化部</a></td>
          <td><a href="http://www.nhfpc.gov.cn/" target="_blank">卫生计生委</a></td>
        </tr>

        <tr>
          <td> </td>
          <td><a href="http://www.pbc.gov.cn/" target="_blank">人民银行</a></td>
          <td><a href="http://www.sasac.gov.cn/n1180/index.html" target="_blank">国资委</a></td>
          <td><a href="http://www.customs.gov.cn/publish/portal0/" target="_blank">海关总署</a></td>
        </tr>
        <tr>
          <td> </td>
          <td><a href="http://www.chinatax.gov.cn/n8136506/index.html" target="_blank">税务总局</a></td>
          <td><a href="http://www.saic.gov.cn/" target="_blank">工商总局</a></td>
          <td><a href="http://www.aqsiq.gov.cn/" target="_blank">质检总局</a></td>
        </tr>

        <tr>
          <td> </td>
          <td colspan="2"><a href="http://www.chinasarft.gov.cn/" target="_blank">国家新闻出版广电总局</a></td>
          <td><a href="http://www.sda.gov.cn/WS01/CL0001/" target="_blank">食品药品监管总局</a></td>
        </tr>
        <tr>
          <td> </td>
          <td><a href="http://www.forestry.gov.cn/" target="_blank">林业局</a></td>
          <td><a href="http://www.sipo.gov.cn/" target="_blank">知识产权局</a></td>
          <td><a href="http://www.ggj.gov.cn/" target="_blank">国管局</a></td>
        </tr>
        <tr>
          <td> </td>
          <td><a href="http://www.chinalaw.gov.cn/" target="_blank">法制办</a></td>
          <td><a href="http://www.scio.gov.cn/" target="_blank">新闻办</a></td>
          <td><a href="http://www.12377.cn/" target="_blank">网信办</a></td>
        </tr>

        <tr>
          <td> </td>
          <td><a href="http://www.spb.gov.cn/" target="_blank">国家邮政局</a></td>
          <td><a href="http://www.court.gov.cn/" target="_blank">高法院</a></td>
          <td><a href="http://www.spp.gov.cn/site2006/" target="_blank">高检院</a></td>
        </tr>
        <tr>
          <td> </td>
          <td><a href="http://www.ccpit.org/" target="_blank">贸促会</a></td>
          <td></td>
          <td></td>
        </tr>
        </table>
       </div>

最后别忘记页面中引入jquery.js

0 0