1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. js
  6. jQuery實作出如直播已售銷出產品的即時跑馬燈效果
js 網頁開發

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

2020/06/02

梅問題-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>

#範例預覽