模仿LED灯的滚动文字效果

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

模仿LED灯的滚动文字效果_第1张图片
detail.gif
模仿LED灯的滚动文字效果_第2张图片
u=3017239425,2310452434&fm=21&gp=0.gif

而滚动文字的实现原理是什么?

![%B5@A]UYD(XB0`7W2YAPL{Q.png](http://upload-images.jianshu.io/upload_images/2642686-3eede325d363ec65.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

首先说水平方向的移动文字
外部存在边框,内部不停地移动

模仿LED灯的滚动文字效果_第3张图片
ZOCFUF1TKRAQ%5PBB{TD0R1.png

这就是滚动文字的实现原理

代码实现

1.js实现
2,特殊标签实现

关于js实现已经有很多代码,这里不再赘述
今天重点说特殊标签的使用
标签

有需要的私聊我

如果使用标签
当我们书写时,发信啊标签自带两个属性

这两个属性分别代表了你的滚动文字的移动方式和滚动方向

除此之外,标签还存在其他属性

属性名称 属性介绍
behavior 滚动方式
direction 设置滚动方向
scrollamount 滚动速度

3.属性详解

3.1文字的滚动方式

文字的滚动方式基本可以分为3种
*循环滚动 scroll
*滚动一次 slide
*来回滚动 alternate




    
    Document
    


    
    
                X先生帅的感天动地,日月无光,
        
海枯石烂,四季如春,春暖花开

你可能感兴趣的:(模仿LED灯的滚动文字效果)