跑马灯效果

最新推荐文章于 2019-06-03 13:49:00 发布

神探小五

最新推荐文章于 2019-06-03 13:49:00 发布

阅读量2.2k

点赞数 1

分类专栏： HTML跑马灯文章标签：跑马灯 html js

本文链接：https://blog.csdn.net/baishatangk/article/details/78490805

版权

HTML跑马灯专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、对于有缝的跑马灯效果可以使用<marquee>标签：

①direction：这个属性表示向那个方向滚动，参数：left、right、up、down

②scrollamount：这个属性表示滚动的速度

③behavior：这个属性表示滚动的方式，参数：scroll循环滚动、slide单次滚动、alternate交替滚动

④loop：这个属性表示滚动次数，默认-1无限滚动

⑤scrolldelay：这个属性表示每次滚动的时间间隔

⑥onmouseover：这个属性一般设置为this.stop()

⑦onmouseout：这个属性一般设置为this.start()

代码示例如下：

<div>
    <marquee width="100px" height="44px" direction="up" scrollamount="3"
             οnmοuseοver="this.stop()" οnmοuseοut="this.start()">
        <a href="">test1</a><br>
        <a href="">test2</a><br>
        <a href="">test3</a><br>
        <a href="">test4</a><br>
    </marquee>
</div>

********************************************************************************************************************************************************************************************

2、对于无缝的跑马灯效果：

直接上代码：转载自：https://www.cnblogs.com/naokr/archive/2013/11/10/3416532.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <style>
        /**注意：最外层的高度必须小于等于要展示的数据的高度:蓝色部分为例：300<34*34所以合理*/
       *{margin:0;padding:0}
        #slide{position:absolute;height:300px;width:260px;color:#FA8E93;overflow:hidden;border:1px solid #ccc}
        #slide p{height:34px;line-height:34px;overflow:hidden}
        #slide span{float:right}
    </style>
</head>
<body>
<div id="slide">
    <div id="slide1">
        <p><span>领取了烈焰双11礼包</span>1、dqx5***</p>
        <p><span>领取了烈焰双11礼包</span>2、s376***</p>
        <p><span>领取了街机三国双11礼包</span>3、sdk1***</p>
        <p><span>领取了烈火战神双11礼包</span>4、说好〃不沋伤</p>
        <p><span>领取了街机三国双11礼包</span>5、说好〃不沋伤</p>
        <p><span>领取了烈焰双11礼包</span>6、gao6***</p>
        <p><span>领取了街机三国双11礼包</span>7、ando***</p>
        <p><span>领取了街机三国双11礼包</span>8、6813***</p>
        <p><span>领取了烈焰双11礼包</span>9、lais***</p>
    </div>
    <div id=slide2></div>
</div>
<script>
    var speed=40
    var slide=document.getElementById("slide");
    var slide2=document.getElementById("slide2");
    var slide1=document.getElementById("slide1");
    slide2.innerHTML=slide1.innerHTML//克隆，为了收尾能够无缝连接
    function Marquee(){
       if(slide.scrollTop>=slide1.offsetHeight)
            slide.scrollTop=0;//slide1消失之后就用从0开始
        else{
            slide.scrollTop++;//一开始的时候是选执行这行代码，值从0开始到slide1全部结束
        }
    }
    var MyMar=setInterval(Marquee,speed)
    slide.οnmοuseοver=function(){clearInterval(MyMar)}
    slide.οnmοuseοut=function(){MyMar=setInterval(Marquee,speed)}
</script>

</body>
</html>

3、使用liMarquee.js还实现无缝跑马灯效果：

直接上连接，自己下代码看：http://www.dowebok.com/demo/188/index4.html