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

前端一个简单的文字滚动特效

2018-11-07 分类：教程 阅读(602) 评论(0)
前端开发文件命名规范
人人网fed css编码前端开发规范
web前端开发的规范

html 代码

<!DOCTYPE html>
    <head lang=”en”>
        <meta charset=”UTF-8″ />
        <title>一个简单的文字滚动效果</title>
        <style>
            #container {
                width: 500px;
                height: 300px;
                margin: 200px auto;
                border: 1px solid #ddd;
                text-align: center;
                background-color: #eee;
            }
            .text {
                width: 200px;
                height: 30px;
                overflow: hidden;
                cursor: pointer;
                margin: 0 auto;
            }
            .text ul {
                margin: 0px;
                padding: 0px;
                list-style: none;
            }
            .text ul li {
                width: 200px;
                height: 30px;
                background: #333;
                line-height: 30px;
            }
        </style>
    </head>
    <body>
        <div id=”container”>
            <h1>文字滚动效果</h1>
            <div class=”text”>
                <ul>
                    <li class=”li1″ style=”color:orange”>wellcoto</li>
                    <li>
                        <a style=”color:green” href=”http://lmrone.top”
                            >http://lmrone.top</a
                        >
                    </li>
                    <li style=”color:blue”>web前端学习</li>
                </ul>
            </div>
        </div>
        <script src=”http://lmrone.top/templets/smallcase/jq.js”></script>
        <script>
            $(function() {
                //文字滚动的函数
                function textslide() {
                    var height = $(‘.text ul li’).height() //获取li的高度
                    //让第一个向上30px,完成之后，再把这个li添加到li的最后，然后把它的marginTop还原到0
                    $(‘.text ul li’)
                        .eq(0)
                        .animate({ marginTop: -height }, function() {
                            $(this)
                                .remove()
                                .appendTo(‘.text ul’)
                                .css({ marginTop: 0 })
                        })
                }
                //每隔3s执行一次文字的滚动
                var t = setInterval(textslide, 1000)
                //当鼠标触碰到text区域时，停止滚动，就需要清除计时器clearInterval
                $(‘.text’).hover(
                    function() {
                        clearInterval(t)
                        //当鼠标离开text区域时，继续滚动
                    },
                    function() {
                        t = setInterval(textslide, 1000)
                    },
                )
            })
        </script>
    </body>
</html>

1.思路
通过改变每个li的margin-top来进行移动
2.涉及的知识点
.setInterval(fn,time);
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

hover(infn,outfn);
hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。infn规定 mouseover 事件发生时运行的函数,必须填写

appendTo()
用法：$(content).appendTo(selector) content规定要插入的内容（必须包含 HTML 标签）; selector:规定把内容追加到哪个元素上
remove():remove() 方法移除被选元素，包括所有的文本和子节点
语法:$(selector).remove()

网易前端开发规范
前端开发规范手册
google 前端开发规范
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论