0.前言
2016年08月18日今天在網上查找到了...
所以有了這篇文章,希望對你們有所幫助
1.如何模仿LED燈的滾動效果
正常LED燈效果
http://img005.hc#/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.hc#%2Fm6%2FM07%2FCA%2FAE%2FwKhQoVUaePCECcmRAAAAAJjoQlA237.gif&rpstart=0&rpnum=0&adpicid=0
而滾動文字的實現原理是什么?
![%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)
首先說水平方向的移動文字
外部存在邊框,內部不停地移動
這就是滾動文字的實現原理
代碼實現
1.js實現
2,特殊標簽實現
關于js實現已經有很多代碼,這里不再贅述
今天重點說特殊標簽的使用
<marquee>標簽
有需要的私聊我
如果使用<marquee>標簽
當我們書寫<marquee>時,發(fā)信啊標簽自帶兩個屬性
這兩個屬性分別代表了你的滾動文字的移動方式和滾動方向
除此之外,<marquee>標簽還存在其他屬性
| 屬性名稱 | 屬性介紹 |
|---|---|
| behavior | 滾動方式 |
| direction | 設置滾動方向 |
| scrollamount | 滾動速度 |
3.屬性詳解
3.1文字的滾動方式
文字的滾動方式基本可以分為3種
*循環(huán)滾動 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 循環(huán)播放
slide 滾動一次
alternate 來回滾動
direction ： 設置滾動方向
left <-
right ->
up 上
down 下
scrollamount ： 滾動速度
每次滾動移動長度硼砰，單位是 px
scrolldelay ： 滾動延遲
單位是 毫秒
loop ：滾動循環(huán)次數
若為 -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>
