跑马灯效果(可点击)

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部分


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)
              }

你可能感兴趣的:(跑马灯效果(可点击))