用<marquee/>标签实现,html代码示例如下
<html><head>
<title>文字滚动示例</title>
</head>
<body>
<div>
水平滚动:
<marquee direction="left" align="bottom" height="25" width="100%" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" scrolldelay="1">水平滚动字幕内容</marquee>
</div>
<div>
垂直滚动:
<marquee direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollAmount="1" scrollDelay="1">垂直滚动字内容</marquee>
</div>
</body>
</html>
用marquee 这个是没法解决的,网上现在的解决办法都是 javascript+css 来解决你可也搜索一下 焦点图 或是焦点轮转图,有很多的jquery 的插件 或是javascript 原生代码,
这个原理也不是控制table 而是控制div 样式层 id 、 class 的样式表来,做的轮转。
<style>*{ margin:0 padding:0 list-style:none}
.table, .table td{ border:1px solid #999border-collapse:collapse margin:0 auto}
.table td{ font-size:14px text-align:center line-height:25px}
.tableTitle{ position:fixed background:#FFF left:50% margin-left:-250px}
</style>
<table width="500" border="0" cellspacing="0" cellpadding="0" class="table tableTitle">
<tr>
<td width="33%">姓名</td>
<td width="33%">语文</td>
<td>数学</td>
</tr>
</table>
<table width="500" border="0" cellspacing="0" cellpadding="0" class="table">
<tr>
<td width="33%">&nbsp</td>
<td width="33%">&nbsp</td>
<td>&nbsp</td>
</tr>
<tr>
<td>张三</td>
<td>95</td>
<td>90</td>
</tr>
<tr>
<td>李四</td>
<td>89</td>
<td>92</td>
</tr>
<tr>
<td>王麻子</td>
<td>96</td>
<td>88</td>
</tr>
<tr>
<td>张三</td>
<td>95</td>
<td>90</td>
</tr>
<tr>
<td>李四</td>
<td>89</td>
<td>92</td>
</tr>
<tr>
<td>王麻子</td>
<td>96</td>
<td>88</td>
</tr>
<tr>
<td>张三</td>
<td>95</td>
<td>90</td>
</tr>
<tr>
<td>李四</td>
<td>89</td>
<td>92</td>
</tr>
<tr>
<td>王麻子</td>
<td>96</td>
<td>88</td>
</tr>
<tr>
<td>张三</td>
<td>95</td>
<td>90</td>
</tr>
<tr>
<td>李四</td>
<td>89</td>
<td>92</td>
</tr>
<tr>
<td>王麻子</td>
<td>96</td>
<td>88</td>
</tr>
<tr>
<td>张三</td>
<td>95</td>
<td>90</td>
</tr>
<tr>
<td>李四</td>
<td>89</td>
<td>92</td>
</tr>
<tr>
<td>王麻子</td>
<td>96</td>
<td>88</td>
</tr>
<tr>
<td>张三</td>
<td>95</td>
<td>90</td>
</tr>
<tr>
<td>李四</td>
<td>89</td>
<td>92</td>
</tr>
<tr>
<td>王麻子</td>
<td>96</td>
<td>88</td>
</tr>
<tr>
<td>张三</td>
<td>95</td>
<td>90</td>
</tr>
<tr>
<td>李四</td>
<td>89</td>
<td>92</td>
</tr>
<tr>
<td>王麻子</td>
<td>96</td>
<td>88</td>
</tr>
<tr>
<td>张三</td>
<td>95</td>
<td>90</td>
</tr>
<tr>
<td>李四</td>
<td>89</td>
<td>92</td>
</tr>
<tr>
<td>王麻子</td>
<td>96</td>
<td>88</td>
</tr>
<tr>
<td>张三</td>
<td>95</td>
<td>90</td>
</tr>
<tr>
<td>李四</td>
<td>89</td>
<td>92</td>
</tr>
<tr>
<td>王麻子</td>
<td>96</td>
<td>88</td>
</tr>
<tr>
<td>张三</td>
<td>95</td>
<td>90</td>
</tr>
<tr>
<td>李四</td>
<td>89</td>
<td>92</td>
</tr>
<tr>
<td>王麻子</td>
<td>96</td>
<td>88</td>
</tr>
<tr>
<td>张三</td>
<td>95</td>
<td>90</td>
</tr>
<tr>
<td>李四</td>
<td>89</td>
<td>92</td>
</tr>
<tr>
<td>王麻子</td>
<td>96</td>
<td>88</td>
</tr>
</table>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)