marquee替代合集

暴富的im

已于 2024-08-21 10:18:39 修改

阅读量650

点赞数 2

分类专栏：前端文章标签： javascript 前端 html css

于 2024-04-07 19:25:41 首次发布

本文链接：https://blog.csdn.net/qq_59626859/article/details/137473706

版权

前端专栏收录该内容

72 篇文章

订阅专栏

方法一：向上无缝(可自行修改)

<!DOCTYPE html>

<html>

<head>

<title>向上滚动</title>

</head>

<style>

#marquee li {

height: 30px;

}

</style>



<body>

<div style="height:180px;overflow:hidden;">

<div id="marquee">

<li>

<span>1.新闻1</span>

</li>

<li>

<span>2.新闻1</span>

</li>

<li>

<span>3.新闻1</span>

</li>

<li>

<span>4.中交股份获评多项长江口深水航道治理工程建设先进</span>

</li>

<li>

<span>5.海南省与中交股份将全方位合作</span>

</li>

<li>

<span>6.长江船舶设计院获中国标准创新贡献一等奖</span>

</li>

</div>

</div>

</body>

<script>

window.onload = function () {

scrolldiv();

// 鼠标停留，离开
var  marquee  = document.getElementById('marquee')

    marquee.addEventListener('mouseenter',function(){
       window.clearInterval(timename);
    })
     marquee.addEventListener('mouseleave',function(){
      timename = setInterval("doScroll()", 50);
    })

}


var offset = 0;

var scrollheight = marquee.offsetHeight;

var length = marquee.children.length;

function scrolldiv() {

不可见处增加同等数量的li元素，模拟无缝连接（实际应该最上面li元素
滚动到不可见之后，删除最上面li元素，再给div末尾添加删除的li元素）

for (var i = 0; i < length - 1; i++) {

var node = marquee.children[i].cloneNode(true);

marquee.appendChild(node);

    }

// 执行滚动，利用margin-top

timename = setInterval("doScroll()", 50);

    }

function doScroll() {

if (offset == scrollheight) {

offset = 0;

        }

marquee.style.marginTop = "-" + offset + "px";

offset += 1;

    }

</script>

</html>

方法二:向左且无缝衔接：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
.parent {
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: absolute;
      background: #ccc;
      left: 0;
      top: 0;
    }
 
    .parent .child {
      position: absolute;
      font-size: medium;
      font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
      right: 0;
      width: auto;
      white-space: nowrap;
      top:50%;
      transform:translateY(-50%)
    }
    </style>
</head>
<body>
    <div class="parent">
   <div id="scrollText" class="child"></div>
   <div id="copyScrollText" class="child"></div>
</div>
<script>
    var timer = null
var copyScrollTextTimer = null
var scrollText = null
var copyScrollText = null
  scrollText = document.getElementById('scrollText')
在每个标签后面加个\可以换行或者  
element.style.whiteSpace = "pre";  通过\n与css
element.innerHTML = "第一行\n第二行\n第三行";
scrollText.innerHTML = ''<div class="change_plat" id="div_plat">\
						<div class="plat">\
							<div class="num num_1">\
								<p>Microsoft</p>\
								<a href="#">XBOX 360</a>\
								<a href="#">XBOX ONE</a>\
							</div>\
							<div class="num num_2">\
								<p>PlayStation</p>\
								<a href="#">PlayStation 3</a>\
								<a href="#">PlayStation 4</a>\
								<a href="#">PlayStation Vita</a>\
							</div>\

						</div>\
					</div>''

  copyScrollText = document.getElementById('copyScrollText')
copyScrollText.innerHTML = '与scrollText一致，上文只是写一下innerHTML返回html，最好占满全屏'
// 两个div都隐藏到右边，然后拿到数据第一个div开始向左滚动
scrollText.style.right = '-' + scrollText.offsetWidth + 'px' // 将div藏在最右边
copyScrollText.style.right = '-' + copyScrollText.offsetWidth + 'px' // 将div藏在最右边
moveToLeft() // 开始向左移
timer = setInterval(moveToLeft, 20)   // 在指定的毫秒数后调用左移函数
// 开始从右往左滚动
 function moveToLeft(){
      // 当第一个div已经滚到了最左边的时候，重置第一个div, 并清除定时器，因为这个时候第二个div已经在滚动了
      if(parseInt(scrollText.style.right) > document.body.clientWidth) {
        scrollText.style.right = '-' + scrollText.offsetWidth + 'px'
        clearInterval(timer)
      }
      // 当第一个div开始滚到左边的时候，启动第二个div的滚动，这样才能两个div才能无缝衔接，循环滚动； 这个做加20的判断是因为当文本内容的宽带比当前窗体的宽度还大的时候，让衔接的时候晚一些，这样就能多出一些空白，不至于两次衔接挤在一起
      if (scrollText.style.right === (scrollText.offsetWidth > document.body.clientWidth ? 20 : 0 + document.body.clientWidth - scrollText.offsetWidth) + 'px') {
        moveCopyScrollTextToLeft()
        copyScrollTextTimer = setInterval(moveCopyScrollTextToLeft, 20)   // 在指定的毫秒数后调用左移函数
      }
      scrollText.style.right = parseInt(scrollText.style.right)+1+'px'
    }
    // 第二个div从右往左滚动
    function moveCopyScrollTextToLeft() {
      // 当第二个div已经滚到了最左边的时候，重置第二个div, 并清除定时器，因为这个时候第一个div已经在滚动了
      if(parseInt(copyScrollText.style.right) > document.body.clientWidth) {
        copyScrollText.style.right = '-' + copyScrollText.offsetWidth + 'px'
        clearInterval(copyScrollTextTimer)
        
      }
      // 当第二个div开始滚到左边的时候，启动第一个div的滚动，这样才能两个div才能无缝衔接，循环滚动; 这个做加20的判断是因为当文本内容的宽带比当前窗体的宽度还大的时候，让衔接的时候晚一些，这样就能多出一些空白，不至于两次衔接挤在一起
      if (copyScrollText.style.right === (scrollText.offsetWidth > document.body.clientWidth ? 20 : 0  + document.body.clientWidth - copyScrollText.offsetWidth) + 'px') {
        moveToLeft()
        timer = setInterval(moveToLeft, 20)   // 在指定的毫秒数后调用左移函数
      }
      copyScrollText.style.right = parseInt(copyScrollText.style.right)+1+'px'
    }
    window.onbeforeunload = function () {
      if (timer) {
        clearInterval(timer)
      }
      if (copyScrollTextTimer) {
        clearInterval(copyScrollTextTimer)
      }
    }
</script>
</body>
</html>

动画实现无缝衔接横向滚动

  <div class='ad'>
        <p class='content'>
            <span style="display: flex;gap: 80px;">
                <span>
                    重要通知：掘金创作者服务中心上线，速度过来体验一下吧
                </span>
                <span>
                    哈哈哈噶几过生日退热贴股脚手架管人个人攻击热固加热
                </span>
                <span>
                    哇哇哇erkreyeruyre8玉玉日格瑞特u要让他8有他8rtyutr8 
                </span>
                   <span>
                   。，i哦文件任务及时反馈撒泼符号位人格如图热 
                </span>
                   <span>
                    重要通知：掘金创作者服务中心上线，速度过来体验一下吧
                </span>
                <span>
                    哈哈哈噶几过生日退热贴脚手架管人个人攻击热固加热
                </span>
                <span>
                    哇哇哇erkreyeruyre8玉玉日格瑞特u要让他8有他8rtyutr8 
                </span>
                <span>
                   。，i哦文件任务及时反馈撒泼符号位人格如图热 
                </span>
            </span>
        </p>
    </div>



        .ad {
            width: 100%;
            height: 60px;
            background-color: #fff;
            border-radius: 10px;
            box-sizing: border-box;
            padding: 0 20px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            font-size: 16px;
            color: #353535;
            box-shadow: 2px 1px 8px 1px rgb(228, 232, 235);
            margin: 40px auto;
        }

        .content {
            flex: 1;
            overflow: hidden;
        }

        .content span {
            display: block;
            width: auto;
            white-space: nowrap;
        }

        .content span {
            animation: marquee 30s linear infinite;
        }

        @keyframes marquee {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-100%);
            }
        }