字幕横向滚动jq、原生js两种方法

最新推荐文章于 2023-01-18 13:11:12 发布

草鞋船

最新推荐文章于 2023-01-18 13:11:12 发布

阅读量659

点赞数 1

文章标签： jq js 字幕滚动

本文链接：https://blog.csdn.net/weixin_44558497/article/details/103126472

版权

代码参考了别人的，但是都没有写原理或更详细的解释，在此总结一下。

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>

草鞋船

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
字幕横向滚动jq、原生js两种方法

代码参考了别人的，但是都没有写原理或更详细的解释，在此总结一下。jq-原理：元素position定位，然后控制left的值，让left从最右边开始慢慢减少到最左边直到超过自身宽度后，left（重新赋值）又从最左边开始。缺点：不用jq的animate的话闪屏比较严重，必须引入jq，如果是移动端用zepto则没有对应的animate方法。<!DOCTYPE html>...
复制链接

扫一扫