html+css+javascript实现列表循环滚动

来源：互联网发布：安卓手机定位软件编辑：程序博客网时间：2024/05/21 19:29

说明：设置时间定时，在规定的时间内替换前一个节点的内容

1、关键代码：javascript：

<script type="text/javascript">        var dome=document.getElementById("dome");    //获取节点        var dome1=document.getElementById("dome1");        var dome2=document.getElementById("dome2");        var speed=50;//设置向上轮动的速度        dome2.innerHTML=dome1.innerHTML;//复制节点  关键语句        function moveTop(){            if(dome1.offsetHeight-dome.scrollTop<=0){//判断内容第一次是否循环完了                dome.scrollTop=0;            }else{                dome.scrollTop++;//否则上移            }        }        var myFunction=setInterval("moveTop()",speed);//设置时间定时        dome.onmouseover=function(){//鼠标放在区域内停止            clearInterval(myFunction);        }        dome.onmouseout=function(){            myFunction=setInterval(moveTop,speed);        }</script>

2、代码示例：完整代码(可运行)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>循环滚动信息栏</title><style type="text/css">body{margin:0px;padding:0px;}#express li{height:25px;border-bottom:dashed 1px #999;line-height:20px;font-size:12px;list-style:none;}#dome{height:305px;overflow:hidden;margin-top:0px;}#book_class{width:200px;height:310px;border:3px solid #999;margin-left:auto;margin-right:auto;margin-top:70px;border-radius:5px 5px 5px 5px;box-shadow:0px 0px 10px 10px #CECED1;}#express{margin-left:-30px;margin-right:10px;margin-bottom:0px;margin-top:0px;}#book_class div div ul li a{text-decoration:none;color:#333333;}#book_class div div ul li a:hover{text-decoration:underline;}</style></head><body><div id="book_class">    <div id="dome">        <div id="dome1">            <ul id="express">                    <li><a href="#">·2010考研英语大纲到货75折...</a></li>                    <li><a href="#">·权威定本四大名著（人民文...</a></li>                    <li><a href="#">·口述历史权威唐德刚先生国...</a></li>                    <li><a href="#">·袁伟民与体坛风云：实话实...</a></li>                    <li><a href="#">·我们台湾这些年：轰动两岸...</a></li>                    <li><a href="#">·畅销教辅推荐：精品套书50...</a></li>                    <li><a href="#">·2010版法律硕士联考大纲75...</a></li>                    <li><a href="#">·计算机新书畅销书75折抢购</a></li>                    <li><a href="#">·2009年孩子最喜欢的书</a></li>                    <li><a href="#">·弗洛伊德作品精选集59折</a></li>                    <!---------多复制<li>标签就行了------这里就不多写了---------->            </div>            <div id="dome2"></div>        </div>    </div>    <!----------防止html没有加载完，把javascript代码写在下面----------> <script type="text/javascript">var dome=document.getElementById("dome");var dome1=document.getElementById("dome1");var dome2=document.getElementById("dome2");var speed=50;//设置向上轮动的速度dome2.innerHTML=dome1.innerHTML;//复制节点function moveTop(){if(dome1.offsetHeight-dome.scrollTop<=0){dome.scrollTop=0;}else{dome.scrollTop++;}}var myFunction=setInterval("moveTop()",speed);dome.onmouseover=function(){clearInterval(myFunction);}dome.onmouseout=function(){myFunction=setInterval(moveTop,speed);}</script></body></html>

3、所的界面如下：

0 0