JS实现信息滚动制作

最新推荐文章于 2022-04-06 22:48:04 发布

nanotry

最新推荐文章于 2022-04-06 22:48:04 发布

阅读量436

点赞数

分类专栏：前端开发文章标签： javascript

本文链接：https://blog.csdn.net/Qimingweikun/article/details/78398748

版权

前端开发专栏收录该内容

22 篇文章 0 订阅

订阅专栏

关键：

setInterval(function,time); //每隔一个时间间隔执行一次函数
setTimeout(function,time); //在一段时间后执行一次函数

scrollTop属性：元素隐藏部分的高度。
用法：

/*scrollTop属性只有DOM元素才有，window/document没有*/
var top = element.scrollTop;    //获取值 ,返回数字，单位像素 
element.scrollTop = 200;    //设置值

overflow:hidden：隐藏超出对象内容

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字无缝滚动</title>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
        .container{
            width:400px;
            height:250px;
            margin:100px auto;
            border:1px solid black;
            border-radius:5px;
            padding:0px;
            box-shadow: 2px 2px 10px #ababab;
        }
        .container-top{
            background-color:red;
            opacity:0.5;
            height:50px;
            font-size:30px;
            line-height:50px;
            text-align:center;
        }
        ul,li{
            list-style:none;
        }
        li{
            height:25px;
            padding-left:30px;
            overflow:hidden;
        }
        .container-bottom{
            height:200px;
            overflow:hidden;
        }
        a{
            color: #333;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="container-top">
        <p>文字无缝滚动</p>
    </div>
    <div class="container-bottom" id="container-bottom">
        <ul id="con1">
            <li><a href="#">1.学会html5 绝对的屌丝逆袭（案例）</a><span>2013-09-18</span></li>
            <li><a href="#">2.tab页面切换效果（案例）</a><span>2013-10-09</span></li>
            <li><a href="#">3.圆角水晶按钮制作（案例）</a><span>2013-10-21</span></li>
            <li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li>
            <li><a href="#">5.分页页码制作（案例）</a><span>2013-11-06</span></li>
            <li><a href="#">6.导航条菜单的制作（案例）</a><span>2013-11-08</span></li>
            <li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>
            <li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li>
            <li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li>
        </ul>
        <ul id="con2">
        </ul>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    var ele = document.getElementById("container-bottom");
    var con1 = document.getElementById("con1");
    var con2 = document.getElementById("con2");
    con2.innerHTML = con1.innerHTML;
    document.getElementById("container-bottom").scrollTop = 0;
    function run(){
        if(ele.scrollTop >= con1.scrollHeight){
            document.getElementById("container-bottom").scrollTop = 0;
        }
        else{
            document.getElementById("container-bottom").scrollTop++;
        }
        if(document.getElementById("container-bottom").scrollTop % 25==0){
            clearInterval(timer);
            setTimeout(function(){
                timer = setInterval("run()",50);
            },2000);
        }
    }
    var timer = setInterval("run()",50);
    ele.onmouseover = function(){
        clearInterval(timer);
    };
    ele.onmouseout = function(){
        timer = setInterval("run()",50);
    };
</script>

nanotry

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现信息滚动制作

关键：setInterval(function,time); //每隔一个时间间隔执行一次函数setTimeout(function,time); //在一段时间后执行一次函数scrollTop属性：元素隐藏部分的高度。scrollTop属性只有DOM元素才有，window/document没有
复制链接

扫一扫