文字信息无缝滚动效果

最新推荐文章于 2020-09-10 17:10:59 发布

何必诗债换酒钱

最新推荐文章于 2020-09-10 17:10:59 发布

阅读量508

点赞数

分类专栏： JavaScript 文章标签： javascript web前端

本文链接：https://blog.csdn.net/u014395524/article/details/46917293

版权

JavaScript 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

最近学到的新东西，，做个小案例与大家共勉！

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>文字信息无缝滚动效果</title>
<style type="text/css">
    *{margin:0;padding:0;}
    a{color:#000;text-decoration:none;}
    .wrap{width:400px;margin:60px auto;border:6px solid #ccc;border-radius:6px;}
    #title{width:100%;background:red;font-size:16px;text-align:center;height:40px;line-height:40px;}
    #box{height:216px;overflow:hidden;}
    ul{list-style: none;}
    ul li{display:block;width:360px;height:30px;line-height: 30px;overflow:hidden;padding-left:20px;padding-right:20px;border-bottom:1px dotted #ccc;}
    a:hover, a:active{color:red;}
</style>
</head>
<body>
    <div class="wrap">
        <div id="title">图书排行</div>
        <div id="box">
            <ul id="con1">
                <li><a href="#">1 解忧杂货店</a></li>
                <li><a href="#">2 我的第一本专注力训练书（专注的孩子更聪明）</a></li>
                <li><a href="#">3 宝宝第一套好性格养成书：皮特猫</a></li>
                <li><a href="#">4 自控力（斯坦福大学最受欢迎的心理学课程）</a></li>
                <li><a href="#">5 从0到1：开启商业与未来的秘密</a></li>
                <li><a href="#">6 硬派健身</a></li>
                <li><a href="#">7 追风筝的人</a></li>
                <li><a href="#">8 棚车少年（套装共8册）（中英双语）</a></li>
                <li><a href="#">9 自我保护意识培养（第1辑）：我不跟你走+别想欺负我（套装共两册）</a></li>
                <li><a href="#">10 岛上书店</a></li>
            </ul>
            <ul id="con2"></ul>
        </div>
    </div>

    <script type="text/javascript">
        var area = document.getElementById('box');
        var con1 = document.getElementById('con1');
        var con2 = document.getElementById('con2');

        con2.innerHTML=con1.innerHTML;//复制出一个相同的ul
        area.scrollTop = 0;
        var speed = 50;//时间间隔
        function scrollUp(){
            if(area.scrollTop >= con1.scrollHeight){
                area.scrollTop = 0;
            }
            else{
                area.scrollTop++;
            }
        }
        
        var myScroll = setInterval('scrollUp()',speed);//初始化  

        area.onmouseover = function(){
            clearInterval(myScroll);
        }
        area.onmouseout = function(){
            myScroll = setInterval('scrollUp()',speed);
        }
    </script>
</body>
</html>