JQ跑马灯效果
HTMl代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<ul class="RealTimeAlarm">
<li v-for="(item, index) in RealTimeAlarmData" :key="index">
<div class="realLeft">
<div class="smallTitle">{{ item.title }}</div>
<div class="smallText">{{ item.text }}</div>
</div>
<div class="realCenter">{{ item.number }}</div>
<div class="realRight">{{ item.time }}</div>
</li>
</ul>
JQ代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
const ul = $('.RealTimeAlarm')[0] const li = $('.RealTimeAlarm>li')[0] const speed = 30 function Marquee() { if (li.offsetTop - ul.scrollTop <= 0) { ul.scrollTop -= li.offsetHeight } else { ul.scrollTop++ } } // 设置定时器 var MyMar = setInterval(Marquee, speed) // 鼠标经过时清除定时器达到滚动停止的目的 ul.onmouseover = function() { clearInterval(MyMar) } // 鼠标移开时重设 ul.onmouseout = function() { MyMar = setInterval(Marquee, speed) }