跑马灯效果

来源：互联网发布：数组长度是什么编辑：程序博客网时间：2024/06/15 22:40

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"             onmouseover="this.stop()" onmouseout="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.onmouseover=function(){clearInterval(MyMar)}    slide.onmouseout=function(){MyMar=setInterval(Marquee,speed)}</script></body></html>

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

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

阅读全文

0 0