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

    本博客主要用于讲解如何使用pudb进行python调试: 1.安装 sudo pip install pudb pip list查看安装结果: 2.使用 测试程序: #!/usr/bin/env py ...

  2. 前端学PHP之字符串函数

    × 目录 [1]特点 [2]输出 [3]空格[4]大小写[5]HTML[6]格式化[7]比较 前面的话 字符串的处理和分析在任何编程语言中都是一个重要的基础,往往是简单而重要的.信息的分类.解析.存储 ...

  3. floating IP 原理分析 - 每天5分钟玩转 OpenStack（107）

    上一节我们通过 Web UI 创建为 cirros-vm3 分配了浮动 IP,今天将分析其工作原理. 首先查看 router 的 interface 配置: 可以看到,floating IP 已经配置 ...

  4. mac下安装tomcat

    在window下面搭建tomcat环境很简单,那是因为我们不熟悉mac系统,当我们习惯了命令行的时候,也是so easy,只要通过以下几个步骤就可以解决,本人亲测可用,不会可以留言. 1.进入apch ...

  5. MVC中处理表单提交的方式（Ajax+Jquery）

    MVC中处理表单有很多种方法,这里说到第一种方式:Ajax+Jquery 先看下表单: <form class="row form-body form-horizontal m-t&q ...

  6. Android之vector代码修改颜色

    前言:google给了很多material design icon,在开发过程中,可以下载下来直接使用,下载地址为https://materialdesignicons.com/ . 1.下载图标,并 ...

  7. C#运用ThoughtWorks生成二维码

    在现在的项目中,较多的使用到二维码,前面介绍过一篇使用Gma生成二维码的操作,现在介绍一个第三方组件,主要介绍生成二维码,二维码的解析,以及对二维码的相关信息的选择,现在介绍ThoughtWorks用 ...

  8. Node.js 爬虫初探

    前言 在学习慕课网视频和Cnode新手入门接触到爬虫,说是爬虫初探,其实并没有用到爬虫相关第三方类库,主要用了node.js基础模块http.网页分析工具cherrio. 使用http直接获取url路 ...

  9. 7.8 数据注解特性--Column

    Column特性可以用到类的属性中,Code-First默认的约定是使用属性名称作为列名.这个Column特性可以打破这个特性. 看下面的代码: using System; using System. ...

  10. Effective java笔记（七），通用程序设计

    45.将局部变量的作用域最小化 将局部变量的作用域最小化,可以增强代码的可读性和可维护性,并降低出错的可能性. Java允许在任何可以出现语句的地方声明变量(C语言中局部变量要在代码块开头声明),要使 ...