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

    接着上一篇,给大家再分享一些数组的其他方法.大家也可以去点击这里学习数组更多的方法 concat方法: 概述:    concat() 方法将传入的数组或非数组值与原数组合并,组成一个新的数组并返回. ...

  2. Android 文件读写

    一.分类 文件读写作为Android四大数据存储方式之一,又分为内部存储和外部存储两种: (1)内部存储(Internal storage): 总是可用. 文件默认情况存储在/data/data/包名 ...

  3. Android NDK开发Hello Word!

    在之前的博客中已经为大家介绍了,如何在win环境下配置DNK程序,本篇我将带大家实现一个简单的Hello jni程序,让大家真正感受一下NDK开发的魅力.这里我们选择使用C+JAVA开发Android ...

  4. WebAPi添加常用扩展方法及思维发散

    前言 在WebAPi中我们通常需要得到请求信息中的查询字符串或者请求头中数据再或者是Cookie中的数据,如果需要大量获取,此时我们应该想到封装一个扩展类来添加扩展方法,从而实现简便快捷的获取. We ...

  5. 【HTTP劫持和DNS劫持】实际JS对抗

    1.对于DIV注入的,可以初始化时检查全部html代码. 检测是否被劫持比较简单,但对抗就略麻烦,这个在说完第2点之后再解释. 2.对于js注入,可以在window监听DOMNodeInserted事 ...

  6. MySQL学习笔记七：存储引擎

    1.MySQL存储引擎的设计采用“插件式”方案,用户可以很方便地选择使用哪种存储引擎,想使用mysql没有提供的引擎时,可以自己安装进去. 查看支持的存储引擎 mysql> show engin ...

  7. ar命令详解

    ar 命令 用途 维护链接编辑器使用的索引库. 语法 ar [  -c ] [  -l ] [  -g | -o ] [  -s ] [  -v ] [  -C ] [  -T ] [  -z ] { ...

  8. 把《c++ primer》读薄（3-3 标准库bitset类型）

    督促读书,总结精华,提炼笔记,抛砖引玉,有不合适的地方,欢迎留言指正. //开头 #include <bitset> using std::bitset; 问题1.标准库bitset类型( ...

  9. angular使用总结

    一．是否有必要加入模块化框架 1.Reqruiejs seajs的主要作用 (1)模块化,让代码易于维护. angular本身就是mvc,模块化很清晰,所以这点用不到requirejs (2)可以按需 ...

  10. HTML5+CSS3实现图片可倾斜摆放的动画相册效果

    先看看效果:其中鼠标悬浮在图片上会有动态效果图 直接上代码: css文件 @CHARSET "UTF-8"; *{ padding:0px; margin:0px; } div{ ...