文字滚动

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值