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

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

有一个小效果而引出的appendTo()函数。的更多相关文章

  1. DEV中的TreeList控件应用的一个小效果实现——个人总结

    我使用最多的DEV控件就是这个TreeList啦,当然用好它很不简单,如果用好它,能做出很精彩的树形层次结构图.TreeList控件很强大,以至于你看DEV自带的DEMO,也得浪费你很长时间应用.DE ...

  2. js-------》(小效果)实现倒计时及时间对象

    js实现倒计时及时间对象 JS实现倒计时效果代码如下: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset ...

  3. 用RecyclerView做一个小清新的Gallery效果 - Ryan Lee的博客

    一.简介 RecyclerView现在已经是越来越强大,且不说已经被大家用到滚瓜烂熟的代替ListView的基础功能,现在RecyclerView还可以取代ViewPager实现Banner效果,当然 ...

  4. 模仿京东顶部搜索条效果制作的一个小demo

    最近模仿京东顶部搜索条效果制作的一个小demo,特贴到这里,今后如果有用到可以参考一下,代码如下 #define kScreenWidth [UIScreen mainScreen].bounds.s ...

  5. hammer使用: 代码：捏合、捏开、图片放大 的一个手机图片“放大缩小可拖动”的小效果

    hammer.js 的使用. (手机手势插件) 捏合.捏开.图片放大 的一个手机图片“放大缩小可拖动”的小效果. 相关js 到 http://www.bootcdn.cn/  查找和下载. hamme ...

  6. 3月题外：关于JS实现图片缩略图效果的一个小问题

    由于3月可能要结束实习,所以应该不会有特别固定的主题,另外我会在月初陆续补上上个月的番外篇Projection和TMS,作为介绍性的内容对矢量切片部分进行补充,剩下时间不定期写一些杂烩. 最近两天在做 ...

  7. Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果

    Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果 前言: 每次写之前都会来一段(废)话.{心塞...} Google Play首页两个tab背景 ...

  8. 【开源一个小工具】一键将网页内容推送到Kindle

    最近工作上稍微闲点,这一周利用下班时间写了一个小工具,其实功能挺简单但也小折腾了会. 工具名称:Simple Send to Kindle Github地址:https://github.com/zh ...

  9. CSS3实现几个常用的网页小效果

    主题 由于最近比较忙,自己也没有很充裕的时间可以去做比较丰富的分享.今晚我挤出时间来制作这几个很常用的CSS3网页小效果.最近写JS的时间比例比较多,不过我还是比较钟情于CSS3.所以我还是坚持分享一 ...

随机推荐

  1. 快速搭建php环境

    WAMP:在windows系统下搭建PHP开发环境 APPSERVER: 两种可用于开发环境的,一般用WAMP LAMP构架 Linux系统 Apache服务器管理软件 Mysql数据库 php语言 ...

  2. 感恩回馈，新鲜出炉的《ASP.NET MVC 5框架揭秘》免费赠送

    上次针对<ASP.NET Web API 2框架揭秘>举办了一次评论赠书活动,很多人问我相同的活动要不要针对<ASP.NET MVC 5框架揭秘>(阅读样章)再来一次,为此我向 ...

  3. ASP.NET MVC之文件上传【一】（八）

    前言 这一节我们来讲讲在MVC中如何进行文件的上传,我们逐步深入,一起来看看. Upload File(一) 我们在默认创建的项目中的Home控制器下添加如下: public ActionResult ...

  4. Rust初步（一）：介绍

    最近在研究Rust这个新的语言.那么Rust是什么呢? Rust是一个注重安全与速度的现代系统编程语言,通过在没有垃圾回收的情况下保证内存安全来实现它的目标,这使它成为一个在很多其它语言不适合的用例中 ...

  5. iOS 使用EZAudio库生成wav出错的情况

    使用EZAudio库 录M4A格式可以参考该库例子中的代码. 录wav格式得改下源码.看下面的代码 AVAudioSession *session = [AVAudioSession sharedIn ...

  6. Matrix Factorization SVD 矩阵分解

    Today we have learned the Matrix Factorization, and I want to record my study notes. Some kownledge ...

  7. 1Z0-053 争议题目解析709

    1Z0-053 争议题目解析709 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 709.A database has three online redo log groups w ...

  8. （十一）WebGIS中要素（Feature）的设计

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 在GIS中元素一般分为点元素,线元素,面元素以及symbol ...

  9. 将Resource中的图片资源动态绑定到PictureBox中:

    //CurrentCommunication为解决方案的名字,dynamic为图片的名字 pictureBox1.Image = CurrentCommunication.Properties.Res ...

  10. 10.Struts2连接数据库

    链接数据库的两种方式: 1.在Action中连接数据库 2.使用工具类连接数据库 1.在Action中连接数据库 源码文档目录如图所示: 1.建立数据库 数据库建立语句: create databas ...