不用JavaScript,不开定时器也可以实现文字滚动的效果,仅仅需要用一对<marquee></marquee>标签来实现。
html代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字滚动</title>
</head>
<body>
<marquee direction="left" behavior="slide" scrollamount="3" scrolldelay="50" loop="4" style="width: 200px;height: 40px;font-size: 12px;color: slateblue; border: 2px solid gray;">哈阿斯蒂芬才哈哈哈哈</marquee>
<section>
<h3 style="color: coral;">direction:滚动方向</h3>
<dl>
<dt>可取值:</dt>
<dd>left:向左滚动,默认效果</dd>
<dd>right:向右滚动</dd>
<dd>up:向上滚动</dd>
<dd>down:向下滚动</dd>
</dl>
</section>
<section>
<h3 style="color: cornflowerblue;">behavior:滚动方式</h3>
<dl>
<dt>可取值:</dt>
<dd>scroll:循环滚动,默认效果</dd>
<dd>alternate:来回交替进行滚动</dd>
<dd>slide:只滚动一次就停止</dd>
</dl>
</section>
<section>
<h3 style="color: seagreen;">scrollamount:滚动速度</h3>
<dl>
<dt>可取值:</dt>
<dd>数值:以像素为单位</dd>
</dl>
</section>
<section>
<h3 style="color: lightseagreen">scrolldelay:滚动时间间隔</h3>
<dl>
<dt>可取值:</dt>
<dd>数值:以毫秒为单位</dd>
</dl>
</section>
<section>
<h3 style="color: yellowgreen;">loop:滚动循环次数</h3>
<dl>
<dt>可取值:</dt>
<dd>数值:次数</dd>
<dd>默认值是-1,滚动会不断的循环下去</dd>
</dl>
</section>
</body>
</html>