有一个小效果而引出的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.所以我还是坚持分享一 ...
随机推荐
- HTML的页面IE注释
我们常常会在网页的HTML里面看到形如[if lte IE 9]……[endif]的代码,表示的是限定某些浏览器版本才能执行的语句,那么这些判断语句的规则是什么呢?请看下文: <!--[if ! ...
- Sql Server系列：数据类型转换函数
T-SQL提供了两个显示转换的函数:CAST函数和CONVERT函数. 1. CAST函数 语法: CAST ( expression AS data_type [ ( length ) ] ) 示例 ...
- LINQ系列：Linq to Object排序操作符
LINQ排序操作符包括:OrderBy.OrderByDescending.ThenBy.ThenByDescending及Reverse. 1. OrderBy 1>. 原型定义 public ...
- JAVA--继承
项目开发遇到一个问题,稀里糊涂给实现了,现在重点讨论一下这是个什么情况,大神们如果看到希望给点指点. 问题:子类与父类具有相同的属性和方法,将子类实例化为父类,调用对应属性的get.set方法,打印出 ...
- IOS数据存储之CoreData使用优缺点
前言: 学习了Sqlite数据之后认真思考了一下,对于已经习惯使用orm数据库的开发者或者对sql语句小白的开发者来说该如何做好数据库开发呢?这个上网搜了一下?看来总李多虑了!apple 提供了一种数 ...
- Neutron 功能概述 - 每天5分钟玩转 OpenStack（65）
从今天开始,我们将学习 OpenStack 的 Networking Service,Neutron.Neutron 的难度会比前面所有模块都大一些,内容也多一些.为了帮助大家更好的掌握 Neutor ...
- MVC中处理表单提交的方式（使用html扩展方法+juqery插件）
这里使用扩展方法来扩展基于jquery.form 插件,实现基于异步的ajax的提交方式.
- 小菜学习设计模式（一）—模板方法（Template）模式
前言 设计模式目录: 小菜学习设计模式(一)—模板方法(Template)模式 小菜学习设计模式(二)—单例(Singleton)模式 小菜学习设计模式(三)—工厂方法(Factory Method) ...
- 基于DDD + SD.Framework实现的统一身份认证系统
项目地址 http://git.oschina.net/lishilei0523/ShSoft.UAC 项目说明 本项目开发的目的有三: 1.作为一个使用SD.Framework框架开发的项目样板 2 ...
- 使用Spire.Barcode程序库生成二维码
使用Spire.Barcode程序库生成二维码 某天浏览网页发现了一个二维码的程序库.它的描述说他可以扫描二维码图像.我很感兴趣,想试试他是不是会有用.所以我就用了些方法扫描二维码图像来测试一下.结果 ...