jQuery實作出如直播已售銷出產品的即時跑馬燈效果

　　最近身旁好友，突然丟一個一頁式銷售的頁面給梅干，問到這一頁式銷售頁下方的跑馬燈效果是怎麼做的，說到跑馬燈，在HTML1.0的年代中，就有針對跑馬燈的標籤可使用，且還可設定跑馬燈的方向與速度，完全不用透過javascript，雖然目前HTML已到了5.0，依然支援這個跑馬燈的語法，但不建議再使用它，再加上這個一頁式銷售頁的跑馬訊息比較不同些。

  以往的跑馬燈效果，都是由下向上推，或是由右向左移動，而這個跑馬燈，比較特別的是，是由上向下推，來顯示目前的搶購狀況，因此梅干就研究了一下，簡單用jquery實作出來，這個如直播銷售已購買的跑馬燈效果。

---

Step1
首先，先將跑馬燈的HTML結構加入，而一個li代表一則訊息。

<div class=“marquee_vertical”>
<ul class=“list”>
    <li>跑馬燈1……</li>
    <li>跑馬燈2…..</li>
    …….
</ul>
</div>

---

Step2
接加入CSS設定，marquee_vertical是設定跑馬燈的顯示範圍與間距，這邊可自行設定。

.marquee_vertical{
height: 135px;
overflow: hidden;
border: dotted 2px red;
padding:10px;
}
ul,ul li{margin:0; padding:0;}
ul li{padding-top:7px; padding-bottom: 7px;}
@media(max-width:480px){
    ul li{display: inline-block;}
}

---

Step3
在body結尾前，加入jquery將jquery引用到網頁中。

<script src=“//code.jquery.com/jquery-3.5.1.min.js”></script>

---

Step4
最後再把控制碼，加在jquery下方，這樣就大功告成啦！

<script>
$(function(){
setInterval(function(){
    $(‘.list li’).first().before($(‘.list li’).last().css(‘height’,‘0’).animate({
        height: $(‘li’).height()
    }));
}, 3000);
});
</script>

---

#範例預覽