有一个小效果而引出的appendTo()函数。

最新推荐文章于 2021-06-21 01:44:21 发布

转载最新推荐文章于 2021-06-21 01:44:21 发布 · 119 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xigua1994/p/5784593.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用jQuery实现信息向上滚动动画的方法。通过演示代码展示了如何利用appendTo()函数更新DOM元素的位置，实现信息逐条向上滚动的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在公司做项目的时候，始终不了解信息逐条向上滚的动画效果，后来查阅相关资料，终于明白了，在这个过程中，让我对appendTo这个函数有了一个全新的认识。话不多说，首先是demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    *{
        margin:0;
        padding: 0;
    }
    .main{
        width:400px;
        height:60px;
        margin:50px auto;
        border:1px solid black;
        overflow:hidden;
    }
    .main p{
        height:60px;
        line-height:60px;
        text-align:center;
        color:black;
    }
    .main .box{
        width: 100%;
        height: 100%;
    }
</style>
<body>
    <div class="main">
        <div class="box"></div>
    </div>
</body>
<script src="lib/jquery/jquery.min.js"></script>
<script>
$(function(){
    data=['//cdn.bootcss.com/jquery/3.0.0/core.js',
        '//cdn.bootcss.com/jquery/3.0.0/jquery.js',
        '//cdn.bootcss.com/jquery/3.0.0/jquery.min.js',
        '//cdn.bootcss.com/jquery/3.0.0/jquery.slim.min.js',
        '//cdn.bootcss.com/jquery/3.0.0/jquery.slim.js'
    ];
    dataUp();
    function dataUp(){
        for(var i=0;i<data.length;i++){
            $('.box').append('<p>'+data[i]+'</p>');
        }
    }
    function runDrawBanner(){
                setInterval(function(){
                    $('.box').animate({'marginTop':'-60px'},2000,function(){
                        var _self = $(this);
                        _self.find('p').eq(0).appendTo(_self);
                        console.log(_self.find('p').eq(0).text());
                        _self.css({'marginTop':'0'});
                    });
                },2000);
        }
    runDrawBanner();
})
    
</script>
</html>

这只是一个简单的demo，可以通过这个实现信息向上翻滚的动画。其中appendTo()的效果可以用下面这个DEMO看到具体的效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>這是一個內容1</li>
        <li>這是一個內容2</li>
        <li>這是一個內容3</li>
        <li>這是一個內容4</li>
        <li>這是一個內容5</li>
    </ul>
</body>
<script src="lib/jquery/jquery.min.js"></script>
<script>
    $(function(){
        function date(){
            $('ul').find('li').eq(0).appendTo('ul');
        }
        setInterval(date,1000);
    })
</script>
</html>

抱歉，不会解释，具体情况看效果

转载于:https://www.cnblogs.com/xigua1994/p/5784593.html