功能：橫向滾動，鼠標(biāo)懸浮停止吮铭，離開繼續(xù)滾動娇钱，支持pc端和移動端
效果圖:
ndox9-22w1q.gif
css:
#scroll_div {
height: 39px;
line-height: 39px;
overflow: hidden;
white-space: nowrap;
width: 100px;
background: pink;
position: absolute;
top: 0;
left: 0;
text-align: center;
z-index: 10;
border: 10px solid pink;
margin: 100px;
}
#scroll_begin,
#scroll_end {
display: inline;
color:#333;
font-size: 14px;
}
html:
<div id="scroll_div" class="fl">
<div id="scroll_begin">
<span class="pad_right">
無縫滾動文案111111-->
</span>
</div>
<div id="scroll_end"></div>
</div>
js:
$(function() {
ScrollImgLeft()
// 橫向滾動
function ScrollImgLeft() {
let speed = 50; //滾動速度
let MyMar = null;
let scroll_begin = document.getElementById("scroll_begin");
let scroll_end = document.getElementById("scroll_end");
let scroll_div = document.getElementById("scroll_div");
scroll_end.innerHTML = scroll_begin.innerHTML;
function Marquee() {
if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0)
scroll_div.scrollLeft -= scroll_begin.offsetWidth;
else scroll_div.scrollLeft += 2;
}
MyMar = setInterval(Marquee, speed);
scroll_div.onmouseover = function() {
clearInterval(MyMar);
}
scroll_div.ontouchstart = function() {
clearInterval(MyMar)
}
scroll_div.onmouseout = function() {
MyMar = setInterval(Marquee, speed);
}
scroll_div.ontouchend = function() {
MyMar = setInterval(Marquee, speed)
}
}
})
