html 横屏滚动字幕,原生js-横向字幕无缝滚动

功能：横向滚动，鼠标悬浮停止，离开继续滚动，支持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:

无缝滚动文案111111-->

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)

}

}

})