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

在公司做项目的时候，始终不了解信息逐条向上滚的动画效果，后来查阅相关资料，终于明白了，在这个过程中，让我对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>

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

posted on 2016-08-18 17:02  西瓜的博客  阅读(155)  评论(0)    收藏  举报

导航