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