文字信息间歇性滚动效果

最新推荐文章于 2023-02-23 10:35:22 发布

何必诗债换酒钱

最新推荐文章于 2023-02-23 10:35:22 发布

阅读量792

点赞数

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

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

版权

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>
                <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>
        </div>
    </div>

    
    <script type="text/javascript">
        var area = document.getElementById('box');
        var liH = 31;//单行滚动的高度(li高度+border-bottom)
        var speed = 50;//滚动的速度
        var delay = 2000;
        var timer;
        
        area.scrollTop = 0;
        area.innerHTML+=area.innerHTML;//复制出一个相同的ul
        

        function startScroll(){
            timer = setInterval('scrollUp()',speed);
            area.scrollTop++;
        }

        function scrollUp(){
            //area.scrollTop++;
            if(area.scrollTop % liH == 0){
                clearInterval(timer);
                setTimeout('startScroll()',delay);
            }
            else{
                area.scrollTop++;
                if(area.scrollTop >= area.scrollHeight/2){
                    area.scrollTop = 0;
                }
            }
        }
        setTimeout('startScroll()',delay);//初始化
    </script>
</body>
</html>

何必诗债换酒钱

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
文字信息间歇性滚动效果

学习了信息无缝滚动效果后，再来看看间歇性滚动的效果。信息间歇性循环滚动效果 *{margin:0;padding:0;} a{color:#000;text-decoration:none;} .wrap{width:400px;margin:60px auto;border:6px solid #ccc;border-radius:6px
复制链接

扫一扫

专栏目录