JavaScript基础滚动条幅的效果

Posted 2020-09-16

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript基础滚动条幅的效果相关的知识，希望对你有一定的参考价值。

镇场诗：
　　　　清心感悟智慧语，不着世间名与利。学水处下纳百川，舍尽贡高我慢意。
　　　　学有小成返哺根，愿铸一良心博客。诚心于此写经验，愿见文者得启发。
——————————————————————————————————————————

注：这个是我跟随视频教程学习的成果。逻辑与思想是视频中的，内容是我的。。。~~~~(>_<)~~~~。以后争取逻辑与思想也是自己的，加油↖(^ω^)↗

code:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <style type="text/css">
        body,ul,li,div{
            margin:0px;
            padding:0px;
        }
        ul,li{
            list-style:none;
        }
        /*
            在css中 用className好
            在js中 用id
        */
        #dome0{
            width:150px;
            height:180px;
            border:1px solid red;
            margin:20px auto;
            padding:5px 10px;
            overflow:hidden;/*滚动条不要出现*/
        }
        #dome1{
            background-color:aquamarine;
        }
        #dome2{
            background-color:rosybrown;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {

            var dome0 = document.getElementById("dome0");
            var dome1 = document.getElementById("dome1");
            var dome2 = document.getElementById("dome2");
            
            dome1.style.height = dome0.offsetHeight + "px";
            dome2.style.height = dome0.offsetHeight + "px";

            //将dome1中的内容复制到dome2中
            dome2.innerHTML = dome1.innerHTML;

            //实现滚动效果，需要定时器
            //在工程中，许多参数的设定并没有一个确定的公式
            //经验确定的
            //参数的名字也需要 易于辨识的。
            window.setInterval("StartRoll(dome0)", 40);
        }

        function StartRoll(myObj)
        {
            if(myObj.scrollTop==myObj.offsetHeight)
            {
                myObj.scrollTop=0;
            }
            else
            {
                myObj.scrollTop++;
            }
            
        }
    </script>
</head>
<body>
    <div id="dome0">
        <div id="dome1">
            <ul>
                <li>论语</li>
                <li>道德经</li>
                <li>金刚经</li>
                <li>易经</li>
                <li>北斗经</li>
                <li>文韬武略</li>
                <li>地藏菩萨本愿经</li>
                <li>本草纲目</li>
            </ul>
        </div>
        <div id="dome2"></div>
    </div>
</body>
</html>

result:

技术分享

tip:

　　不同的背景颜色是为了方便查看效果。

感想:

　　真是很巧妙，这种思想与逻辑实现效果的代码不多，但是效果做的却很好。赞叹。

——————————————————————————————————————————
博文的精髓，在技术部分，更在镇场一诗。IDE: VS2015;浏览器: Firefox。
html+css+js，强，值得努力学习。传智播客的视频教程是我的学习资源,推荐。
如果博文有可以改进的地方，请留下评论，我会认真思考的。

注：我是一位正在努力的普通人，此文仅供测试与参考使用，不可做其他用途。当参考博文内容时，代表您已接受使用条款。

以上是关于JavaScript基础滚动条幅的效果的主要内容，如果未能解决你的问题，请参考以下文章

炫酷 CSS 背景效果的 10 个代码片段

JavaScript基础 滚动条幅的效果

JavaScript基础滚动条幅的效果