js-字幕上下滚动轮播（渐隐）

作者: 叫我魏大川 | 来源:发表于2020-04-02 17:23 被阅读0次

js-字幕上下滚动轮播（渐隐）
js-字幕上下轮播滚动（Vue控件版）
iOS Gif for Demo
js-字幕无缝滚动
原生js-横向字幕无缝滚动
上下滚动轮播的实现
基于C++的实现文字序幕上下滚动效果
iOS 关于类似于淘宝的广告上下滚动
循环滚动展示 label
自动滚动轮播

屏幕快照 2020-04-02 下午5.18.39.png

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  </head>
  <body>
    <div id="dome">
            <div id="dome1">
                <div class="a"> <div class="item">00000</div>  </div>
        <div class="a"> <div class="item">11111</div> </div>
        <div class="a"> <div class="item">22222</div> </div>
        <div class="a"> <div class="item">33333</div> </div>
        <div class="a"> <div class="item">44444</div> </div>
        <div class="a"> <div class="item">55555</div> </div>
        <div class="a"> <div class="item">66666</div> </div>
        <div class="a"> <div class="item">77777</div> </div>
        <div class="a"> <div class="item">88888</div> </div>
        <div class="a"> <div class="item">99999</div> </div>
            </div>
            <div id="dome2"></div>
        </div>
  </body>
</html>

<script>

var dome; //全局变量
var timer; //定时器变量

var viewHeight = 150;  //控件高度
var viewWidth  = 300;  //控件宽度

window.onload = function()
{
    //获取三个<div>对象
    dome = document.getElementById("dome");
  dome.style = 'height:'+viewHeight+'px;'+'width:'+viewWidth+'px;';

    var dome1 = document.getElementById("dome1");
    var dome2 = document.getElementById("dome2");
    //将dome1的内容，复制到dome2中
    dome2.innerHTML = dome1.innerHTML;
    //鼠标放上停止滚动，鼠标移出继续滚动
    // dome.onmouseover = function(){
    //     //清除定时器
    //     window.clearInterval(timer);
    // }
    // dome.onmouseout = function(){
    //     timer = window.setInterval("start()",30);
    // }
    //定时器
    //timer = window.setInterval("start()",30);  
       this.timer = setInterval(()=>{
        //使用此函数解决卡顿问题,若但递归使用此函数来控制移动，则不能自定义速度，               所以配合定时器使用。
        window.requestAnimationFrame(this.start)  
      },16);
}

function start()
{
    //如果滚动上去的距离，等于dome1的高度，则开始下一次滚动
    if(dome.scrollTop == document.getElementById("dome1").offsetHeight)
    {
        dome.scrollTop = 0;
    }else
    {
        dome.scrollTop = dome.scrollTop +1;
    }

  jisuanOpcity()
}

function jisuanOpcity(){
  let hh = document.getElementsByClassName('a')[0].offsetHeight;
  console.log(hh);
  for(let i=0; i<20; i++){
    if(hh*(i+1)<dome.scrollTop){
      // document.getElementsByClassName('a')[i].style = 'opacity:'+0;
    }else if((hh*(i+1) - dome.scrollTop) > viewHeight){
      document.getElementsByClassName('a')[i].style = 'opacity:'+1;
    }else{
      let opcityx = (hh*(i+1) - dome.scrollTop) / viewHeight;
      document.getElementsByClassName('a')[i].style = 'opacity:'+ opcityx;
    }
    
  }
}

</script>

<style>
body{
  font-size:12px;
  color: black;
}
.a{
  padding: 5px 0px 5px 0px;
}
.item{
  color: red;
  background-color: greenyellow;
  border-radius: 15px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  /* width: 100%; */
}
#dome{
    overflow:hidden; /*溢出属性*/
    float:left;
  margin-left: 100px;
  margin-top: 100px;
  background-color: white
}
#dome li{
  height: 30px;
    line-height:30px;
    border-bottom:1px dashed #ccc;
}
</style>