t-3.跑马灯

0.1向上不间断跑马灯
            

 <div class="news-box" id="news_box">
                <ul class="demo1" id="demo1">
                    <li> 
                        <a href="#"> <font>热</font>0无屏!手机终极形态</a>
                    </li>
                    <li> 
                        <a href="#">1无屏 ! 手机终极形态</a>
                    </li>
                    <li> 
                        <a href="#">2无屏 ! 手机终极形态</a>
                    </li>
                    <li> 
                        <a href="#">3无屏 ! 手机终极形态</a>
                    </li>   
                </ul>
                <ul class="demo2" id="demo2"></ul>
            </div>
 
    var speed=100;  //数值越大，速度越慢
    demo2.innerHTML=demo1.innerHTML;  
    function Marquee(){         
                                //offestTop
                            　  //对象的最顶部到对象在当前窗口显示的范围内的顶边的距离．
                                // 即是在出现了纵向滚动条的情况下，滚动条拉动的距离．
                                //offsetHeight
                                //offsetHeight属性可以获取元素的可见高度值。
        if(demo2.offsetHeight - news_box.scrollTop<=0){
            news_box.scrollTop -= demo1.offsetHeight;  
        }else{  
            news_box.scrollTop++; //每次增加1px  
        }  
    }  
    var MyMar=setInterval(Marquee,speed)  
    news_box.onmouseover=function() {clearInterval(MyMar)}  
    news_box.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
 
0.2 向右跑不间断
<style>
       *{margin:0;padding:0;}
       #gd{
           background:url("../images/yz.png") 0 0 no-repeat;
           background-size: 1.23rem 0.41rem;
           margin-left:0.1rem;
       }
       #demo{
           width:4.9rem;
           height:0.4rem;
           overflow:hidden;
           margin:0 auto;
           margin-left:1.23rem;
           box-sizing: border-box;
           border:0.01rem solid #02ae3b;
       }
       #indemo{
           width:66rem;                 //长度的给多点 不然在320情况下会有bug
           height:0.4rem;
           font-size:0.15rem;
       }
       #demo1,#demo2{
           float:left;
           height:0.4rem;
           line-height:0.4rem;
       }

    </style>
 
<div id="gd">
    <div id='demo'>
        <div id='indemo'>
            <div id='demo1'>
            <font size=+1 style="color:#0a0a0a;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;为积极响应国家“健康中国2030计划”烟台莱山北大医院特推出妇科检查援助补贴政策，七项妇科常规检查仅需26元！（限每日网络预约前15名）</font>
            </div>
            <div id='demo2'></div>
        </div>
    </div>    
</div>


<script>
var speed = 20; //数字越大速度越慢
var tab = document.getElementById("demo");
var tab1 = document.getElementById("demo1");
var tab2 = document.getElementById("demo2");
tab2.innerHTML = tab1.innerHTML;
function Marquee() {
    if (tab2.offsetWidth - tab.scrollLeft <= 0) {
        tab.scrollLeft -= tab1.offsetWidth;
    }else{
        tab.scrollLeft++;
    }
}
var MyMar = setInterval(Marquee, speed);
tab.onmouseover = function() {
    clearInterval(MyMar)
};
tab.onmouseout = function() {
    MyMar = setInterval(Marquee, speed)
};
</script>
 0.3京东跑马灯（间断向上）
<!--京东快报-->
    <div class="news">
        <div class="news-width">
            <a class="news-img" href="#">
                <img src="images/news.png" alt="">  
            </a>
            <div class="news-box" id="news_box">
                <ul class="demo1" id="demo1">
                    <li> 
                        <a href="#">3无屏 ! 手机终极形态</a>
                    </li>
                    <li> 
                        <a href="#"> <font>热</font>0无屏!手机终极形态</a>
                    </li>
                    <li> 
                        <a href="#">1无屏 ! 手机终极形态</a>
                    </li>
                    <li> 
                        <a href="#">2无屏 ! 手机终极形态</a>
                    </li>
                    <li> 
                        <a href="#">3无屏 ! 手机终极形态</a>
                    </li>   
                    <li> 
                        <a href="#"> <font>热</font>0无屏!手机终极形态</a>
                    </li>
                </ul>
                
                <!--<ul class="demo2" id="demo2"></ul>-->
            </div>
            <a class="more" href="">
                <span>更多</span>         
            </a>
        </div>
    </div>
    /*京东快报*/
.news{
    width:6.4rem;
    height:0.5rem;
    background:#1ec895;
}
.news-width{
    width:6.2rem;
    height:0.3rem;
    border-radius:0.05rem;
    background:#fff;
    position:relative;
    top:0.1rem;
    left:0.1rem;
}
/*left*/
.news-img{
    float:left;
}
.news-img img{
    width:0.73rem;
    height:0.16rem;
    margin:0.07rem 0.1rem;
}
/*middle*/
.news-box{
    width:4rem;
    height:0.3rem;
    line-height:0.3rem;
    float:left;
    overflow:hidden;
}
.news-box ul li a  font{
    color:#F4307d;
    padding-right:0.1rem;
}
/*right*/
.more{
    float:right;
    width:0.5rem;
    height:0.3rem;
    line-height: 0.3rem;
    text-align:center;
}
.more span{ 
    border-left:0.01rem solid #666;
    padding-left:0.1rem;
    font-size:0.12rem;
}



var n=1;
function gone(){
    n++;
    $("#news_box ul").animate({"margin-top":-0.3*n+"rem"},500,
        function(){
            if(n===5){
                $("#news_box ul").css("margin-top","-0.3rem");
                n=1;
            }
        }
    )
}
timer=setInterval("gone()",1000);
 