js 运动的应用 新浪微博
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
ul{margin:10px auto;padding:0;width:300px;height:400px;border:1px solid black;}
li{list-style:none; border-bottom:dashed;filter:alpha(opacity=0);opacity:0;height:0;overflow:hidden;} </style>
<script src='perfectStartMove.js'></script>
<script>
window.onload = function(){
var oText = document.getElementById('text1');
var oInput = document.getElementsByTagName('input')[0];
var oUl =document.getElementsByTagName('ul')[0]; oInput.onclick = function(){
var cLi = document.createElement('li');
cLi.innerHTML = oText.value;
if(oUl.children[0]){
oUl.insertBefore(cLi,oUl.children[0]);
}else{
oUl.appendChild(cLi);
}
oText.value = '';
cLi.style.height = 'auto';
var heightTmp = cLi.offsetHeight;
cLi.style.height = 0;
perfectStartMove(cLi,{height:heightTmp},function(){
perfectStartMove(cLi,{opacity:100})
});
};
};
</script>
</head> <body>
<textarea id='text1' rows='10' cols='40'></textarea><br / >
<input type='button' value="发送"/>
<ul>
</ul>
</body>
</html>
js 运动的应用 新浪微博的更多相关文章
- 带无缝滚动的轮播图(含JS运动框架)
今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...
- js运动框架之一条乱跑的虫子
克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...
- JS运动从入门到兴奋1
hello,我是沐晴,一个充满了才华,却靠了照骗走江湖的前端妹子.在这个充满PS的年代,这你们都信,哈哈,废话不多说,今天要分享的是关注JS运动的知识.楼主一直认为,不管学习什么,核心思想才是王道,掌 ...
- 关于js运动的一些总结
js运动实现,有两种.一种是速度版,另一种是时间版. 速度版是通过对速度的加减乘除,得出元素的运动数据.时间版是通过对时间进行Tween公式运算,得出元素的运动数据. 速度版运动优点:容易在运动过程中 ...
- JS运动学习笔记 -- 任意值的运动框架(高/宽度,背景颜色,文本内容,透明度等)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js运动动画
原文:js运动动画 今天简单的学了一下js运动动画,再此感谢慕课网的这位老师http://www.imooc.com/view/167,讲的很不错. 下面是我整理出来的结果. 知识点一:速度动画. 1 ...
- 第八节 JS运动基础
运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...
- JS运动 - 无缝滚动和缓动动画
JS运动 - 无缝滚动和缓动动画 无缝滚动原理:首先先复制两张图片(第一张和第二张)放到最后面;ul绝对定位,如果ul的left值大于等于4张图片的宽度,就应该快速复原为0. html <!DO ...
- 解析JS运动
解析JS运动 物体运动原理:通过改变物体的位置,而发生移动变化. 任何运动都是相对的,就像物理中的运动公式:s(要达到的)=s0(当前的样式值)+vt. 方法: 1.运动的物体使用绝对定位 ...
随机推荐
- c/c++ main 函数命令行参数的使用
C程序最大的特点就是所有的程序都是用函数来装配的.main()称之为主函数,是所有程 序运行的入口.其余函数分为有参或无参两种,均由main()函数或其它一般函数调用,若调用的是有参函数,则参数在调用 ...
- node.js 和 npm/cnpm/nrm 的安装
node.js 和 npm/cnpm/nrm 的安装 安装 node.js.去 官网 下载,下载 LTS 版本的.安装时一路点确定,不要改动任何设置. 在 git-bash 或是 cmd 下,输入 n ...
- 最简化的DirectX 11开发环境的配置 VS2010
转载自:http://blog.csdn.net/zhmxy555/article/details/7672101 在编写基于DirectX 11的应用程序之前,我们当然需要在IDE中加入Direct ...
- fastdfs+nginx make时报错fatal error:fdfs_define.h: 没有那个文件或目录
环境: ubuntu 18.04.1 fastdfs-nginx-module_v1.16 root@wang-machine:~/桌面/FastDFS# cd nginx-1.8.1/root@wa ...
- JXJJOI2018_三题
这次比赛的话其实还挺满意的,虽然T1 20pts(指的是分数,考试时知道有坑但是考完都没找到的我就知道切不掉这题qwq),T3爆零是在意料之外,不过其实T2贪心能切掉也是意料之外的,所以作此判断.当然 ...
- C++ 标准IO
标准输入 gets() 1 char * (char *str) gets() 主要是从标准输入流读取字符串并回显,读到换行符时退出,并会将换行符省去. 返回值为获得的字符串的首地址. 123 cha ...
- 我们一起学React Native(一):环境配置
最近想在项目中实现跨平台,对比一下主流的实现方式,选用了React Native.参考网上的教程,对于一直都是原生移动端开发,对前端的知识不是很了解的,感觉入门不是特别简单.于是打算把学习React ...
- java虚拟机的运行原理
一.类加载器 首先来看一下java程序的执行过程. 从这个框图很容易大体上了解java程序工作原理.首先,你写好java代码,保存到硬盘当中.然后你在命令行中输入 javac YourClassNam ...
- nginx增加访问验证
使用OpenSSL实用程序创建密码文件 如果您的服务器上安装了OpenSSL,则可以创建没有附加软件包的密码文件.我们将在/ etc / nginx配置目录中创建一个名为.htpasswd的隐藏文件来 ...
- Autotestplat体验中心
web端 移动端 可戳[阅读原文]进行体验