iT邦幫忙

0

HTML 跑馬燈問題

  • 分享至 

  • xImage

需要使用跑馬燈顯示現在的訊息
資料是用 $.getJSON的方法抓php
資料長這樣
https://ithelp.ithome.com.tw/upload/images/20200901/20122463FGjKQhdAaT.png

現在顯示的資料都是正確的
而目前的問題是第一次顯示訊息時
第一個字碰到最左邊就會重頭從右邊開始跑
但跑第二次的時候又正常了
(正常:從右邊開始直到最後一個字都跑完才會再從右邊開始跑)
請問是哪邊有問題?

程式碼:

 <script>
$.getJSON('geojson.php', function (geojson) {
            var perfect = 0, good = 0;
       
            for (var i = 0; i < geojson.length; i++) {
                var apoche = parseFloat(geojson[i]["properties"]["pm25"]);
            
                if (apoche >= 0 && apoche < 15) { perfect++; }
                else if (apoche < 35 && apoche >= 15) { good++; }
               
               }
            var msg = "現在測站共" +perfect;
        
            document.getElementById("Hday").innerHTML = msg;
        });
      
    </script>
    <marquee direction="left" bgcolor=ffffcc width=50% crollamount="10">  <p id="Hday"></p></marquee>
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

1
japhenchen
iT邦超人 1 級 ‧ 2020-09-01 07:23:06

marquee 過時Deprecated而且有相容性的問題,盡早改成CSS MARQUEE

JSFiddle

css部份

.marquee {
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0;
    height: 16px;
    display: block;
}
.marquee span {
    display: inline-block;
    text-indent: 0;
    overflow: hidden;
    -webkit-transition: 15s;
    transition: 15s;
    -webkit-animation: marquee 15s linear infinite;
    animation: marquee 15s linear infinite;
}

@keyframes marquee {
    0% { transform: translate(100%, 0); -webkit-transform: translateX(100%); }
    100% { transform: translate(-100%, 0); -webkit-transform: translateX(-100%); }
}

HTML部份

<p class="marquee"><span>marquee 過時了而且有相容性的問題,盡早改成CSS MARQUEE</span></p>
lingwu iT邦新手 5 級 ‧ 2020-09-01 23:48:51 檢舉

好的
謝謝你的回覆

0
亞歷斯
iT邦新手 5 級 ‧ 2020-09-19 17:21:58

我是從 HTML5 開始學習網頁,未看過 marquee 這個標籤
於是 Google 了一下,發現有這麼一個彩蛋 XD

google search

正是 japhenchen 提到用 css animation 實作的效果:

https://ithelp.ithome.com.tw/upload/images/20200919/201170891C16q4A6Kf.png

我要發表回答

立即登入回答