找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发js滚动字幕

2018-12-26 分类：JavaScript 阅读(765) 评论(0)
广州招聘前端游戏开发
计算机前端开发招聘信息
招聘前端开发讲师

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta http-equiv=”Content-Type” content=”text/html; charset=’utf-8′” />
        <title>js滚动字幕</title>
        <style>
            #wall {
                overflow: hidden;
                height: 300px;
                position: relative;
                text-align: center;
                margin: 100px auto;
                width: 400px;
            }
            #slide,
            #slide2 {
                list-style: none;
                color: blue;
                font-weight: bold;
            }
            #slide li,
            #slide2 li {
                margin: 20px 0px;
            }
            #parent {
                position: relative;
            }
        </style>
    </head>
    <body>
        <div id=”wall”>
            <div id=”parent”>
                <ul id=”slide”>
                    <li>Welcome</li>
                    <li>to</li>
                    <li>our</li>
                    <li>system</li>
                    <li>hha</li>
                    <li>谢谢</li>
                    <li>使用</li>
                </ul>
                <ul id=”slide2″>
                    <li>Welcome</li>
                    <li>to</li>
                    <li>our</li>
                    <li>system</li>
                    <li>hha</li>
                    <li>谢谢</li>
                    <li>使用</li>
                </ul>
            </div>
        </div>
        <script>
            window.onload = function() {
                var speed = 40
                var wall = document.getElementById(‘wall’)
                var parent = document.getElementById(‘parent’)
                var slide = document.getElementById(‘slide’)
                var heightValue = slide.offsetHeight
                var topValue = 0
                function scroll() {
                    if (topValue + heightValue + 20 == 0) {
                        topValue = 0
                    }
                    topValue–
                    parent.style.top = topValue + ‘px’
                    console.log(parent.style.top)
                    setTimeout(scroll, speed)
                }
                setTimeout(scroll, speed)
                wall.addEventListener(‘mouseover’, function(event) {
                    clearTimeout(scroll)
                    scroll = null
                    event.defaultPrevented
                    event.cancelBubble
                })
                wall.addEventListener(‘mouseout’, function(event) {
                    clearTimeout(scroll)
                    scroll = function() {
                        if (topValue + heightValue + 20 == 0) {
                            topValue = 0
                        }
                        topValue -= 1
                        parent.style.top = topValue + ‘px’
                        console.log(topValue)
                        setTimeout(scroll, speed)
                    }
                    setTimeout(scroll, speed)
                    event.defaultPrevented
                    event.cancelBubble
                })
            }
        </script>
    </body>
</html>
前端移动开发招聘
前端开发招聘简历模板
石家庄前端开发招聘
赞(0)
前端开发者 » 前端开发js滚动字幕
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论