在公司做项目的时候，始终不了解信息逐条向上滚的动画效果，后来查阅相关资料，终于明白了，在这个过程中，让我对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. CRM/ERP 企业管理软件中常见的七种程序设计模式

    管理软件中的常见代码设计模式,来自于业务上的需要,有不恰当的地方欢迎批评指正. 1  RE-TRY 重试模式 场景:在连接数据库服务器时,如果SQL Server数据库没有启动或正在启动,我们需要有一 ...

  2. SQL 里解析 XML 格式 字段 信息

    DECLARE @ItemMessage XML ),zje ),yfje ),bcje ),URL ),Remark )) SET @ItemMessage=N'<List> <i ...

  3. JAVA基础代码分享--学生成绩管理

    问题描述: 从键盘读入学生成绩,找出最高分,并输出学生成绩等级. 成绩>=最高分-10  等级为’A’   成绩>=最高分-20  等级为’B’ 成绩>=最高分-30  等级为’C’ ...

  4. jquery EasyUI的formatter格式化函数代码

    要格式化数据表格列,需要设置formatter属性,该属性是一个函数,它包含两个参数:  value: 对应字段的当前列的值  record: 当前行的记录数据  复制代码 代码如下: $('#tt' ...

  5. 初试JqueryEasyUI（附Demo）

    写在前面 准备 布局Layout 菜单树Tree 内容页Tabs 右键菜单Menu 表单Form 对话框Dialog 示例Demo下载 关于easyui不多说,对于我们这样没有美术功底的程序员来说,简 ...

  6. 【JUC】JDK1.8源码分析之SynchronousQueue（九）

    一.前言 本篇是在分析Executors源码时,发现JUC集合框架中的一个重要类没有分析,SynchronousQueue,该类在线程池中的作用是非常明显的,所以很有必要单独拿出来分析一番,这对于之后 ...

  7. 2.羽翼sqlmap学习笔记之MySQL注入

    1.判断一个url是否存在注入点: .sqlmap.py -u "http://abcd****efg.asp?id=7" -dbs 假设找到数据库:student ------- ...

  8. 【原创】技术往事：改变世界的TCP/IP协议（珍贵多图、手机慎点）

    1.前言 作为应用层开发人员,接触最多的网络协议通常都是传输层的TCP(与之同处一层的另一个重要协议是UDP协议),但对于IP协议,对于应用程序员来说更多的印象还是IP地址这个东西,再往深一点也就很难 ...

  9. 一致性hash算法简介

    一致性哈希算法在1997年由麻省理工学院提出的一种分布式哈希(DHT)实现算法,设计目标是为了解决因特网中的热点(Hot spot)问题,初衷和CARP十分类似.一致性哈希修正了CARP使用的简单哈希 ...

  10. TeamCity : 配置第一个工程

    前面我们已经创建了TeamCity Server 和一个 Agent,接下来我们为一个.net core 控制台程序配置自动化的编译. 创建 .net core 项目 我们在本地创建一个简单的 .ne ...