网站通知栏信息滚动

最新推荐文章于 2024-01-18 09:37:12 发布

霹雳弦惊

最新推荐文章于 2024-01-18 09:37:12 发布

阅读量5.3k

点赞数

分类专栏：基础知识文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/qq_33501079/article/details/77824418

版权

基础知识专栏收录该内容

13 篇文章 0 订阅

订阅专栏

没有加入事件。实现了广告栏的基本功能。这个功能主要是要设置overflow:hidden；否则很有可能不成功

欢迎访问我的个人博客何俊才个人博客，这是基于NodeJS独立搭建的博客，代码基本上都是自己一行一行的码出来的。有很多不完善的地方希望访问这篇博文的阅读者给出建议。以便我更好的改进。（因为是学习所以有些框架就没用，在自己能力范围之内能实现的就自己手动实现）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="gdt.css" type="text/css">
    <script type="text/javascript" src="gdt.js"></script>
    <title>滚动条</title>
</head>
<body id="body">
    <div id="dtk">
        <div id="fd">
            <p>这是一个动态栏</p>
            <p>这是一个消息栏</p>
            <p>这是一个测试用例</p>
            <p>使用了新技术</p>
            <p>需要凑够字数</p>
            <p>可以的</p>
            <p>这是一个滚动条</p>
        </div>
    </div>
</body>
</html>

#body{
    margin: 0px;
}
#fd {
    width: 200px; /*对文字进行处理*/
    height: 300px;
    position: absolute;
    top: 201px;
    text-align: center;

}
#dtk{
    width: 200px;/*浮动区域进行限制*/
    height: 200px;
    border:1px solid beige;
    margin: 0px 100px 250px 500px;
    position: absolute;
    overflow: hidden;
}

window.onload = function () {
    var fd = document.getElementById("fd");
    var dtk = document.getElementById("dtk");
    var sttep=parseInt(document.defaultView.getComputedStyle(fd,null).top.slice(0,-2));
    var dtkstart = parseInt(document.defaultView.getComputedStyle(fd,null).bottom.slice(0,-2));
    var dtknum = parseInt(document.defaultView.getComputedStyle(dtk,null).bottom.slice(0,-2));
    setInterval(function () {
        var top = document.defaultView.getComputedStyle(fd,null).top;
        var num = parseInt(top.slice(0,-2));//果有个参数为负值,那么这里的范围为【0，stringValue.length+(-2));
        if(num>=(sttep+dtkstart-dtknum))
        fd.style.cssText = "top:"+((num-1)+"px")+";";
        else{
            fd.style.cssText = "bottom:"+((sttep-1)+"px")+";";
        }
    },50);
}