有一个小效果而引出的appendTo()函数。
在公司做项目的时候，始终不了解信息逐条向上滚的动画效果，后来查阅相关资料，终于明白了，在这个过程中，让我对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()函数。的更多相关文章
- DEV中的TreeList控件应用的一个小效果实现——个人总结
我使用最多的DEV控件就是这个TreeList啦,当然用好它很不简单,如果用好它,能做出很精彩的树形层次结构图.TreeList控件很强大,以至于你看DEV自带的DEMO,也得浪费你很长时间应用.DE ...
- js-------》(小效果)实现倒计时及时间对象
js实现倒计时及时间对象 JS实现倒计时效果代码如下: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset ...
- 用RecyclerView做一个小清新的Gallery效果 - Ryan Lee的博客
一.简介 RecyclerView现在已经是越来越强大,且不说已经被大家用到滚瓜烂熟的代替ListView的基础功能,现在RecyclerView还可以取代ViewPager实现Banner效果,当然 ...
- 模仿京东顶部搜索条效果制作的一个小demo
最近模仿京东顶部搜索条效果制作的一个小demo,特贴到这里,今后如果有用到可以参考一下,代码如下 #define kScreenWidth [UIScreen mainScreen].bounds.s ...
- hammer使用: 代码：捏合、捏开、图片放大 的一个手机图片“放大缩小可拖动”的小效果
hammer.js 的使用. (手机手势插件) 捏合.捏开.图片放大 的一个手机图片“放大缩小可拖动”的小效果. 相关js 到 http://www.bootcdn.cn/ 查找和下载. hamme ...
- 3月题外：关于JS实现图片缩略图效果的一个小问题
由于3月可能要结束实习,所以应该不会有特别固定的主题,另外我会在月初陆续补上上个月的番外篇Projection和TMS,作为介绍性的内容对矢量切片部分进行补充,剩下时间不定期写一些杂烩. 最近两天在做 ...
- Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果
Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果 前言: 每次写之前都会来一段(废)话.{心塞...} Google Play首页两个tab背景 ...
- 【开源一个小工具】一键将网页内容推送到Kindle
最近工作上稍微闲点,这一周利用下班时间写了一个小工具,其实功能挺简单但也小折腾了会. 工具名称:Simple Send to Kindle Github地址:https://github.com/zh ...
- CSS3实现几个常用的网页小效果
主题 由于最近比较忙,自己也没有很充裕的时间可以去做比较丰富的分享.今晚我挤出时间来制作这几个很常用的CSS3网页小效果.最近写JS的时间比例比较多,不过我还是比较钟情于CSS3.所以我还是坚持分享一 ...
随机推荐
- Execute SQL Task 参数和变量的映射
Execute SQL Task能够执行带参数的SQL查询语句或存储过程(SP),通过SSIS的变量(Variable)对参数赋值.对于不同的Connection Manager,在Task中需要使用 ...
- Android之线程池深度剖析
1.线程池的引入 引入的好处: 1)提升性能.创建和消耗对象费时费CPU资源 2)防止内存过度消耗.控制活动线程的数量,防止并发线程过多. 使用条件: 假设在一台服务器完成一 ...
- 深入学习jQuery节点操作
× 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的 ...
- .NET平台开源项目速览(2)Compare .NET Objects对象比较组件
.NET平台开源项目速览今天介绍一款小巧强大的对象比较组件.可以更详细的获取2个对象的差别,并记录具体差别,比较过程和要求可以灵活配置. .NET开源目录:[目录]本博客其他.NET开源项目文章目录 ...
- Android音频开发之MediaRecorder/MediaPlayer
前言: 上次我们介绍了实时采集音频数据以及播放,今天我们来认识一下直接录制文件的方式. 直接上代码:录制管理类 public class MediaRecorderManager { public s ...
- 浅谈async、await关键字 => 深谈async、await关键字
前言 之前写过有关异步的文章,对这方面一直比较弱,感觉还是不太理解,于是会花点时间去好好学习这一块,我们由浅入深,文中若有叙述不稳妥之处,还请批评指正. 话题 (1)是不是将方法用async关键字标识 ...
- Javascript中关键参数this浅析
自从接触javascript以来,对this参数的理解一直是模棱两可.虽有过深入去理解,但却也总感觉是那种浮于表面,没有完全理清头绪. 但对于this参数,确实会让人产生很多误解.那么this参数到底 ...
- 2014年百度之星程序设计大赛 - 初赛（第二轮）JZP Set
题目描述:一个{1, ..., n}的子集S被称为JZP集,当且仅当对于任意S中的两个数x,y,若(x+y)/2为整数,那么(x+y)/2也属于S.例如,n=3,S={1,3}不是JZP集,因为(1+ ...
- kafka源码分析之二客户端分析
客户端由两种:生产者和消费者 1. 生产者 先看一下生产者的构造方法: private KafkaProducer(ProducerConfig config, Serializer<K> ...
- grape动态PHP结构（二）——管理后台
一.概述