美文网首页
跑马灯效果(可点击)

跑马灯效果(可点击)

作者: 星宇万物 | 来源:发表于2022-06-15 15:28 被阅读0次

css部分

 .notice_bg{width: 100%;height: 30px;background: #041C3B;}
          .notice_bg .left_img{margin:0 15px;display: none;}              
          .notice_bg li{color: #fff;height: 30px;line-height: 30px;}
          .notice_bg li a{color: #fff;font-size: 13px;}
          .notice_bg .notice_list{overflow: hidden;display: flex;}            
          #wrapper{height: 30px;width: 1200px;margin: 0 auto;position: relative;}
          #wrapper .over{width: 1200px;height: 30px;overflow: hidden;position: relative;}
          #wrapper ul {position: absolute;left: 0;top: 0;}
          #wrapper li{text-align: center;float: left; width: auto;margin-right: 40px;list-style: none;}

h5部分

<div class="notice_bg" >
    <div class="notice_list" id="wrapper">
        <div class="left_img">
                <img style="width: 20px;" src="https://staticresource.liuxue315.cn/images/jlzt_notice.png">
        </div>
        <div class="over">
          <ul>
            <li><a href="" target="_blank">今晚八点丨上海蒙特奥利弗学校创校校长 Michael Yang谈:国际高中教育如何助力学生终生可持续发展?</a></li>
            <li><a href="" target="_blank">今就点丨北京蒙特奥利弗学校创校校长 Michael Yang谈:国际高中教育如何助力学生终生可持续发展?</a></li>
          </ul>
        </div>
    </div>
</div>

js部分

var timer=null;
              var speed=-2;
              var od=document.getElementById("wrapper");
              var au=od.getElementsByTagName('ul')[0];
              var ali=au.getElementsByTagName('li');
              au.innerHTML=au.innerHTML+au.innerHTML;
              au.style.width=(ali[0].offsetWidth+40)*ali.length+'px';
              timer=setInterval(move,100)
              function move(){
                console.log(123);
                if(au.offsetLeft<-au.offsetWidth/2){
                  au.style.left='0';
                }
                if(au.offsetLeft>0){
                  au.style.left=-au.offsetWidth/2+'px';
                }
                au.style.left=au.offsetLeft+speed+'px';
              }
              od.οnmοuseοver=function(){
                clearInterval(timer);
              }
              od.οnmοuseοut=function(){
                timer=setInterval(move,100)
              }

相关文章

网友评论

      本文标题:跑马灯效果(可点击)

      本文链接:https://www.haomeiwen.com/subject/owdxvrtx.html