展示大屏的常用效果[无线滚动]

gm_ming0501

已于 2022-03-31 09:32:27 修改

阅读量785

点赞数 1

分类专栏： js_H5 文章标签： javascript

于 2020-12-16 16:35:42 首次发布

本文链接：https://blog.csdn.net/gm_ming0501/article/details/110475324

版权

js_H5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1/向上面不间断无线滚动效果
css:

<div class="mesgBox marquee>我是需要滚动的内容</div>
/* 动画 */
@keyframes scroll-top {
    0%{}
    100%{
        transform: translateY(-50%);
    }
}
.marquee {
    animation: scroll-top 15s linear infinite;
}
 .marquee:hover{
    animation-play-state: paused;
}

// 滚动复制一份;如果内容少不足以滚动,就移除marquee
    $('.marquee').each(function () {
        // 拿到了marquee里面的所有row
       var rows = $(this).children().clone();
        // 追加进去
        $(this).append(rows);
        // 父.append(子)==>子.appendTo(父)
        // $('ul').append($('<li>li</li>'));==>$('<li>li</li>').appendTo('ul');
    });

2/一帧一帧向上无线滚动

<div class="maquee">
	<ul>
		<li>第一行</li>
		<li>第二行</li>
		<li>第三行</li>
		<li>第四行</li>
	</ul>
</div>
<style>
.maquee{width:100%;height:120px;overflow:hidden;}
.maquee li{height:38px;}
</style>

js:

 
	  function autoScroll(obj){  
			$(obj).find("ul").animate({  
				marginTop : "-39px"  //一个li子元素的行高
			},500,function(){  
				$(this).css({marginTop : "0px"}).find("li:first").appendTo(this);  
			})  
		}  
		$(function(){  
			setInterval('autoScroll(".maquee")',2000);
		})

3/无线滚动向上
html:

<div class="showMain" style="position: relative;width: 100%; height: 958px; overflow-y: auto">
 <div class="runDataBox innerbox" id="areaBox" style="height: 956px">
    <!--gm运行参数gm -->
    <div id="nowBox"><p>当前显示内容</p></div>
    <div id="nextBox"><p>复制当前显示内容到这里</p></div>
  </div>
</div>
<style>
.runDataBox {
  height: 715px;
  overflow-y: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

#nowBox {
  display: flex;
  flex-direction: column;
}
</style>

js:

      var speed1 = 20
      var box = document.getElementById('areaBox')//保证数字为0，父级添加position:relative;
      var box1 = document.getElementById('nowBox')
      var box2 = document.getElementById('nextBox')
      box2.innerHTML = box1.innerHTML
      // $('#box2').html(box1)
      function Marquee1() {
        if (box2.offsetTop - box.scrollTop <= 0) box.scrollTop -= box1.offsetHeight
        else {
          box.scrollTop++
        }
      }
      var MyMar1 = setInterval(Marquee1, speed1)
      box.onmouseover = function () {
        clearInterval(MyMar1)
      }
      box.onmouseout = function () {
        MyMar1 = setInterval(Marquee1, speed1)
      }