0.前言
2016年08月18日今天在网上查找到了...
所以有了这篇文章,希望对你们有所帮助
1.如何模仿LED灯的滚动效果
正常LED灯效果
http://img005.hc360.cn/m6/M07/CA/AE/wKhQoVUaePCECcmRAAAAAJjoQlA237.gif
http://image.baidu.com/search/detail?ct=503316480&z=&tn=baiduimagedetail&ipn=d&word=led%E6%BB%9A%E5%8A%A8GIF%E5%9B%BE&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=-1&cs=1292485080,1984796979&os=3923380932,1692391277&simid=3336152030,325211708&pn=0&rn=1&di=105221525420&ln=335&fr=&fmq=1471509693466_R&ic=0&s=undefined&se=&sme=&tab=0&width=&height=&face=undefined&is=&istype=2&ist=&jit=&bdtype=0&adpicid=0&pi=0&gsm=0&objurl=http%3A%2F%2Fimg005.hc360.cn%2Fm6%2FM07%2FCA%2FAE%2FwKhQoVUaePCECcmRAAAAAJjoQlA237.gif&rpstart=0&rpnum=0&adpicid=0
detail.gif
u=3017239425,2310452434&fm=21&gp=0.gif
而滚动文字的实现原理是什么?
![%B5@A]UYD(XB0`7W2YAPL{Q.png](https://img.haomeiwen.com/i2642686/3eede325d363ec65.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
首先说水平方向的移动文字
外部存在边框,内部不停地移动
ZOCFUF1TKRAQ%5PBB{TD0R1.png
这就是滚动文字的实现原理
代码实现
1.js实现
2,特殊标签实现
关于js实现已经有很多代码,这里不再赘述
今天重点说特殊标签的使用
<marquee>标签
有需要的私聊我
如果使用<marquee>标签
当我们书写<marquee>时,发信啊标签自带两个属性
这两个属性分别代表了你的滚动文字的移动方式和滚动方向
除此之外,<marquee>标签还存在其他属性
| 属性名称 | 属性介绍 |
|---|---|
| behavior | 滚动方式 |
| direction | 设置滚动方向 |
| scrollamount | 滚动速度 |
3.属性详解
3.1文字的滚动方式
文字的滚动方式基本可以分为3种
*循环滚动 scroll
*滚动一次 slide
*来回滚动 alternate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
</style>
</head>
<body>
<!--
滚动文字 marquee
===========================================
<marquee>并不是一个标准的HTML标签。
你如果把带有<marquee>的网页提交到W3C万维网标准化组织去认证的话。
它会报语法错误的。
近几年，火狐浏览器和谷歌浏览器也支持<marquee>标签。
所以marquee标签，在W3C里面没有，但还是可以用的。
===========================================
双标签
块属性标签
behavior ： 滚动方式
scroll 循环播放
slide 滚动一次
alternate 来回滚动
direction ： 设置滚动方向
left <-
right ->
up 上
down 下
scrollamount ： 滚动速度
每次滚动移动长度，单位是 px
scrolldelay ： 滚动延迟
单位是 毫秒
loop ：滚动循环次数
若为 -1 则代表 无限次
width/height
宽度和高度
bgcolor
背景颜色
hspace/vspace
空白空间，等同于 margin
vspace = margin-top & margin-bottom
hspace = margin-left & margin-right
-->
<marquee behavior="slide" direction="up" scrollamount="10px" scrolldelay="0" width="300px" height="300px" bgcolor="yellow" loop="-1" vspace="100px" hspace="200px">
X先生帅的感天动地，日月无光，
<br>
海枯石烂，四季如春，春暖花开
</marquee>
</body>
</html>
网友评论