js实现信息滚动的效果

来源：互联网发布：西班牙语扫描翻译软件编辑：程序博客网时间：2024/05/18 01:34

最近在学习前端。作为前端小白，媛媛从今天起，每天都会发表一篇博文，用于督促自己的学习与成长。

在浏览网闸的时候，我们经常会看到有信息滚动栏，在一个box内，一条一条的信息循环滚动。下面我们先实现一种无缝循环滚动的效果。代码如下

<!DOCTYPE html><html>  <head>    <title>scroll.html</title><meta charset="UTF-8">    <meta name="keywords" content="keyword1,keyword2,keyword3">    <meta name="description" content="this is my page">    <meta name="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><style type="text/css">*{margin: 0;padding: 0}h1{text-align: center;}.box{border: 1px solid red;width: 400px;height: 120px;margin: 0 auto;overflow: hidden;}.box ul li{list-style: decimal;margin-left: 40px;height: 30px;line-height: 30px;}</style>  </head>    <body>  <h1>翻滚吧 水果君</h1>    <div id="box" class="box">         <ul id="scroll1">        <li>苹果</li>        <li>香蕉</li>        <li>橘子</li>        <li>西瓜</li>        <li>雪梨</li>        <li>蓝莓</li>        <li>乱入者</li>        <li>猕猴桃</li>        </ul>        <ul id="scroll2"></ul>            <script type="text/javascript">    var box = document.getElementById("box");//得到盒子    var scroll1 = document.getElementById("scroll1");//得到的第一个ul    var scroll2 = document.getElementById("scroll2");    scroll2.innerHTML = scroll1.innerHTML ;//把第一个ul的内容复制给第二个，用于实现无缝的循环滚动    var scroll = setInterval("furitGo()",200);//设置周期定时器    function furitGo(){    if(box.scrollTop>=scroll1.offsetHeight){//当盒子已经滚动过的高度大于等于第一个ul的高度时，我们把第一个ul恢复到初始位置    box.scrollTop = 0;    }else{//scrollTop加一，用于向上滚动    box.scrollTop++;    }    }        box.onmousemove=function(){    clearInterval(scroll);             }        box.onmouseout = function(){       scroll = setInterval("furitGo()",200);    }        </script>            </div>  </body></html>

0 0