广告效果滚动

function marquee(){
        var speed=50,
            marqueeW=document.getElementById("marquee-wrap"),
            marquee1=document.getElementById("marquee1"),
            marquee2=document.getElementById("marquee2");
        var myMarquee;
        function scroll(){
            if(marquee2.offsetTop*2-marqueeW.scrollTop<=40){
                marqueeW.scrollTop=0;
            }else{
                marqueeW.scrollTop++;
                if(marqueeW.scrollTop%40==0){
                    clearTimeout(myMarquee);
                    setTimeout(function(){ myMarquee=setInterval(scroll,speed);},2000)
                }
            }
        }
        myMarquee=setInterval(scroll,speed);
        marqueeW.οnmοuseοver=function(){clearInterval(myMarquee);}
        marqueeW.οnmοuseleave=function(){myMarquee=setInterval(scroll,speed)}
	}
    window.οnlοad=function(){
        marquee();
    }

　　

<div id="marquee-wrap">
    <div id="marquee1">
        <p>第一条</p>
        <p>第二条</p>
    </div>
    <div id="marquee2">
        <p>第一条</p>
        <p>第二条</p>
    </div>
</div>    

 

.marquee-wrap{height:40px;line-height:40px;overflow:hidden;white-space:nowrap;}
.marquee-wrap>div:first-child{padding-top:40px;}
.marquee-wrap>div{white-space:nowrap;}
.marquee-wrap>div>span{margin-right:40px;}
.icon-bugle{position:absolute;left:-25px;top:20%;width:23px;}

　　

-------------------2017-11-17补充---------------------

有个bug,滚到最后一条的时候直接变成最开始的那条

解决：给第一个marquee1加个padding-top（是为行高）判断那里是为

 if(marquee2.offsetTop*2-marqueeW.scrollTop<=80){...}

　　

转载于:https://www.cnblogs.com/PeggyChan/p/7755100.html