跪求文字轮播html代码,谢谢

跪求文字轮播html代码,谢谢,第1张

用<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>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7202932.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-02
下一篇 2023-04-02

发表评论

登录后才能评论

评论列表(0条)

保存