前端开发页面新闻上下滚动

2018年度最佳web前端开发工具和框架
前端开发工具 记事本
.net 前端开发工具

html 代码

<head>
    <meta charset=”utf-8″>
    <meta name=”author” content=”http://www.jb51.net/” />
    <title>文字列表无缝向上滚动代码</title>
    <style type=”text/css”>
        #demo {
            overflow: hidden;
            height: 154px;
        }
        #demo1 li,
        #demo2 li {
            height: 22px;
            list-style: none;
        }
        ul {
            padding: 0;
            margin: 0;
        }
    </style>
    <script type=”text/javascript”>
        var speed = 40
        window.onload = function () {
            var demo = document.getElementById(“demo”);
            var demo2 = document.getElementById(“demo2”);
            var demo1 = document.getElementById(“demo1”);
            demo2.innerHTML = demo1.innerHTML
            function Marquee() {
                if (demo.scrollTop >= demo1.offsetHeight) {
                    demo.scrollTop = 0;
                } else {
                    demo.scrollTop = demo.scrollTop + 1;
                }
            }
            var MyMar = setInterval(Marquee, speed)
        }
    </script>
</head>
<body>
    <div id=”demo”>
        <ul id=”demo1″>
            <li><a href=”#” target=”_blank”>前端开发者欢迎您的到来</a></li>
            <li><a href=”#” target=”_blank”>只有努力才会有美好的明天</a></li>
            <li><a href=”#” target=”_blank”>没有人一开始就是高手,都是从菜鸟开始</a></li>
            <li><a href=”#” target=”_blank”>每一天都是新的需要好好珍惜</a></li>
            <li><a href=”#” target=”_blank”>怨天尤人是没有任何作用的</a></li>
            <li><a href=”#” target=”_blank”>今天你写代码了吗</a></li>
            <li><a href=”#” target=”_blank”>分享的胸怀和互助的精神最终成就了你</a></li>
        </ul>
        <div id=”demo2″></div>
    </div>
</body>
</html>

大盒子必须有高,每个li必须有高,这是必须属性,有高才能算卷去的高度,
放两个盒子,如果大盒子卷去的高度大于等于第一个盒子的高度,就让大盒子巻去的高度为0 ,否则大盒子巻去的高度累加,

web前端用什么开发工具
php前端用哪些开发工具
objective c前端开发工具
» 本文来自:前端开发者 » 《前端开发页面新闻上下滚动》
» 本文链接地址:https://www.rokub.com/6227.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!