先定义对象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
相关推荐
我们在使用bootstraptable做表格展示时,有时需要固定表格的高度当数据超出高度会出现滚动条,这时有可能出现表头列和数据列对不齐。出现这个问题的原因是数据列出现了滚动条占了宽度,造成表头 数据 的div宽度不...
本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 ... <div id=test class=table-... * 合并单元格,同一列相同数据会合并到同一单元格 * field:要合并的field列 */ function merge
一、项目说明 ①此项目是ASP.NET项目,开发语言是C# ②bootstrap-table使用需要下载对应的css和js插件 ... ②table-responsive:有table-responsive,表格有滚动条没有table-responsive,网页有滚动
话不多说,跟这小编来一起看下吧 ... //该函数在上面一个table数据加载完成后调用 //把表头的宽度设置到会滚动的页头去 var copyWidth = function () { var b = $('#data_tbody').prev().find('tr:last').fi
当然,也可以只在页面上放一个table标签,之后的所有数据和样式都通过js控制也是可以的,后面会说(优点方便控制修改数据,尤其是ajax方式获取的json格式,但是调整样式比较麻烦) ps:这个是插件的官网,里面有...
Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等。今天就结合Bootstrap table的...
使用 position:sticky for tables mobx - ready scrollToRow(rowIndex) 方法可用渲染 table, tr, td, th, 所以默认表格样式、边框折叠等可以很容易地应用 < 3KB xss=removed> row {一世}} );"> import { List } ...
Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等。那么本文给大家介绍JS组件...
使用位置:粘在桌子上mobx-准备好了scrollToRow(rowIndex)方法可用useApi可以授予任何表子组件访问全局API的权限渲染table , tr , td , th ,因此可以轻松地应用默认的表格样式,边框折叠等<3KB xss=removed> ( ...
今天我们实现的是一个列表页面上移、下移功能。如图: 当勾选列表中的列时,点击上移或者下移,会动态上移或者下移。 html代码如下: <input type=button onclick=up(); value= 上移 > <input type=...
9.2.1 创建表格的基本语法(table元素、tr元素、th元素、td元素) 9.2.2 设置表格边框线条宽度(border属性) 9.2.3 设置表格宽度(width属性) 9.2.4 表格在页面中的对齐(align属性) 9.2.5 表格的描述(summary属性) 9.2.6...
1、特殊文本的实现 页面的空格以及一些特殊字符需要通过转义字符的方式体现 1、 表示一个空格 2、< 表示 < 3、> 表示 > 4、© 表示© Demo : 1、创建一个页面 02-text.html 2、在页面...
//创建一个可以滚动的只读的SQL语句对象 sqlStmt = sqlCon.createStatement(java.sql.ResultSet.TYPE_SCROLL_INSENSITIVE,java.sql.ResultSet.CONCUR_READ_ONLY); //准备SQL语句 strSQL = "select name,age...
7.1.1 表格的基本构成——table、tr、td 119 7.1.2 表格的标题——caption 120 7.1.3 表格的表头——th 121 7.2 设置表格基本属性 123 7.2.1 表格的宽度——width 123 7.2.2 表格的高度——height...
//创建一个可以滚动的只读的SQL语句对象 sqlStmt = sqlCon.createStatement(java.sql.ResultSet.TYPE_SCROLL_INSENSITIVE, java.sql.ResultSet.CONCUR_READ_ONLY);//准备SQL语句 strSQL = "select * from ...
<class name="MyContent" table="jc_mycontent"> <meta attribute="sync-DAO">false</meta> <cache usage="read-write"/> <id name="id" type="java.lang.Integer" column="id"><generator class=...
(Container.DataItem, "数据字段1")%>’ & name=’(Container.DataItem, "数据字段2")%>’ /> 7.表格点击改变颜色 if (e.Item.ItemType == ListItemType.Item ||e.Item.ItemType == ListItemType....
id='(Container.DataItem, "数据字段1")%>' & name='(Container.DataItem, "数据字段2")%>' /> 7.表格点击改变颜色 if (e.Item.ItemType == ListItemType.Item ||e.Item.ItemType == ListItemType.AlternatingItem...
jQuery详细教程,讲解很透彻, 一. jQuery 语法实例 $(this).hide() ... $("#test").hide() 演示 jQuery hide() 函数,隐藏 id="test" 的元素。 $("p").hide() 演示 jQuery hide() 函数,隐藏所有 <p> 元素。...