代码参考了别人的,但是都没有写原理或更详细的解释,在此总结一下。
jq-原理:元素position定位,然后控制left的值,让left从最右边开始 慢慢减少到最左边直到超过自身宽度后,left(重新赋值)又从最左边开始。
缺点:不用jq的animate的话闪屏比较严重,必须引入jq,如果是移动端用zepto则没有对应的animate方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滚动字幕</title>
</head>
<body>
<div id="affiche">
<span class="affiche_text">字幕会滚动啦</span>
</div>
</body>
<style>
#affiche {
height: 30px;
background: rgb(82, 118, 238);
position: relative;
}
.affiche_text {
position: absolute;
top: 0;
left: 0;
line-height: 30px;
display: block;
word-break: keep-all;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js" ></script>
<script type="text/javascript">
// (function(){var timer = setTimeout(this.marquee, 1000);}()); //让字幕几秒后才开始出现
function marquee() {
var scrollWidth = $('#affiche').width();console.log(scrollWidth);
var textWidth = $('.affiche_text').width();console.log(textWidth);
var i = scrollWidth;console.log(i);
setInterval(function() {
i--;
if(i < -textWidth ) {
i = scrollWidth;console.log(i);
}
$('.affiche_text').animate({'left': i+'px'}, 20);//用jq的animate方法,不会闪屏
// $('.affiche_text').css('left',i+'px');//直接控制样式,但是会出现闪屏。
}, 20);
}
marquee()
</script>
</html>
原生js-原理:让scroll_begin和scroll_end两个子容器在一行内显示(即:变成行内元素),然后通过设置父容器scrollLeft的值,让其发生滚动,当scrollLeft增加到超过scroll_begin宽度时,重新赋值(后面就一直在重复,+=2 超过一定量后又重新赋值)-----(此时已经无法用言语形容了,自己用手比划一下就知道了)
缺点:轻微屏闪,还有最重要的是:如果文字不够长,即单个子容器宽度不超过父容器的话,就不能一直滚动。
(我觉得我还没有理解透彻,欢迎评论探讨)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>滚动字幕</title>
</head>
<style>
#scroll_div {
height: 39px;
line-height: 39px;
overflow: hidden;
white-space: nowrap;
background: rgb(108, 238, 82);
}
#scroll_begin,
#scroll_end {
display: inline;
}
</style>
<body>
<div id="scroll_div" class="fl">
<div id="scroll_begin">
如果您有其他问题,请告知客服,我们会尽心为您解答,吧啦吧啦~客服电话:13912345678
</div>
<div id="scroll_end"></div>
</div>
</body>
<script type="text/javascript">
// 横向滚动
var scroll_begin = document.getElementById("scroll_begin");
var scroll_end = document.getElementById("scroll_end");
var scroll_div = document.getElementById("scroll_div");
scroll_end.innerHTML = scroll_begin.innerHTML;
function Marquee() {
console.log(scroll_end.offsetWidth);//水平方向 width + 左右padding + 左右border-width
console.log(scroll_div.scrollLeft);//返回文档的滚动left方向的距离,(当窗口发生滚动时值改变)
console.log(scroll_begin.offsetWidth);
if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0)
scroll_div.scrollLeft -= scroll_begin.offsetWidth;
else scroll_div.scrollLeft += 2;
}
var MyMar=setInterval(Marquee, 50);
// pc端?鼠标移入移出字幕暂停、启动
scroll_div.onmouseover = function() {
clearInterval(MyMar);
}
scroll_div.onmouseout = function() {
MyMar = setInterval(Marquee, 50);
}
//移动端?点击字幕暂停
scroll_div.ontouchstart = function() {
clearInterval(MyMar)
}
scroll_div.ontouchend = function() {
MyMar = setInterval(Marquee, 50)
}
</script>
</html>