Table实现tr数据滚动
2015-12-03 08:47
525 查看
先定义对象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
/*文字上下滚动*/
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
相关文章推荐
- C语言 计算水仙花数
- Uploadify 3.2 参数属性、事件、方法函数详解以及配置
- ibatis框架简单应用
- SpringJdbc的应用举例
- Linux查看系统硬盘内存及开机信息的命令
- Linux操作系统常用命令
- 如何读取properties文件中属性
- Servlet实现文件的上传
- JS传中文乱码解决方法
- PE 文件编外篇之导入函数表
- Win32]一个调试器的实现(六)显示源代码
- openwrt:ubus
- Machine Learning week 9 quiz: Recommender Systems
- Mahout推荐算法API详解
- Apache Mahout 简介
- HTML5 微信二维码提示框
- Android中View转换为Bitmap及getDrawingCache=null的解决方法
- 误删除nova数据库中instances表之数据恢复
- 数字图像处理:附录-程序实例、参考文献、标准图片集合
- 数字图像处理:第二十三章 基于内容的图象与视频检索