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

    - 1 <base> 标签用法 ```base: 为页面上的所有链接规定默认地址或默认目标target: 跳转到的目标页 <base target=_blank> <!- ...

  2. 无法在“EntityFramework”已存在的情况下创建影像复制该文件的解决方案

    问题产生的原因:你项目正在生成中你就打开浏览器预览了,导致这个问题解决方案:右击重新生成项目,等生成后再打开 “/”应用程序中的服务器错误. 无法在“EntityFramework”已存在的情况下创建 ...

  3. 【Win10应用开发】自定义桌面壁纸

    调用通用的API来设置桌面壁纸,是一件既简单又有趣的事情,结合XAML可以生成图像的特性,你甚至可以做一个应用,让用户用他所拍的照片做成一张自定义壁纸,然后作为桌面壁纸. 这个API是通用的,应用运行 ...

  4. IOS数据存储之NSUserDefaults

    前言: 作为从事Android开发人来说一定听说过SharedPreferences,然后要成为一名ios开发工程师来说咋能不知道NSUserDefaults!接下来让我们认识一下. NSUserDe ...

  5. Netbeans配置Xdebug

    1.进入 http://xdebug.org/wizard.php 页面,新建一个php页面,里面输入 echo phpinfo(); 然后在运行的页面,复制页面内容到里面, 这个网站会分析出,当前运 ...

  6. 如何用Python实现杨辉三角和心

    1. 如何实现杨辉三角 import copy list=[] newlist=[] def Fibonacci(list,n): newlist.append(0) if n ==1: return ...

  7. 【Java心得总结六】Java容器中——Collection

    在[Java心得总结五]Java容器上——容器初探这篇博文中,我对Java容器类库从一个整体的偏向于宏观的角度初步认识了Java容器类库.而在这篇博文中,我想着重对容器类库中的Collection容器 ...

  8. struts2学习笔记--struts.xml配置文件详解

    这一节主要讲解struts2里面的struts.xml的常用标签及作用: 解决乱码问题 <constant name="struts.i18n.encoding" value ...

  9. 【JUC】JUC线程池框架综述

    一.前言 在分析完了JUC的锁和集合框架后,下面进入JUC线程池框架的分析,下面给出JUC线程池的总体框架,之后再逐一进行分析. 二.JUC线程池框架图 说明:从上图可知,JUC线程池框架中的其他接口 ...

  10. 我的java后端书架