模仿LED灯的滚动文字效果

2016-08-18 本文已影响0人灵魂渡劫者

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>