<!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 运动的应用 新浪微博的更多相关文章

  1. 带无缝滚动的轮播图（含JS运动框架）

    今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...

  2. js运动框架之一条乱跑的虫子

    克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...

  3. JS运动从入门到兴奋1

    hello,我是沐晴,一个充满了才华,却靠了照骗走江湖的前端妹子.在这个充满PS的年代,这你们都信,哈哈,废话不多说,今天要分享的是关注JS运动的知识.楼主一直认为,不管学习什么,核心思想才是王道,掌 ...

  4. 关于js运动的一些总结

    js运动实现,有两种.一种是速度版,另一种是时间版. 速度版是通过对速度的加减乘除,得出元素的运动数据.时间版是通过对时间进行Tween公式运算,得出元素的运动数据. 速度版运动优点:容易在运动过程中 ...

  5. JS运动学习笔记 -- 任意值的运动框架（高/宽度，背景颜色，文本内容，透明度等）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. js运动动画

    原文:js运动动画 今天简单的学了一下js运动动画,再此感谢慕课网的这位老师http://www.imooc.com/view/167,讲的很不错. 下面是我整理出来的结果. 知识点一:速度动画. 1 ...

  7. 第八节 JS运动基础

    运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...

  8. JS运动 - 无缝滚动和缓动动画

    JS运动 - 无缝滚动和缓动动画 无缝滚动原理:首先先复制两张图片(第一张和第二张)放到最后面;ul绝对定位,如果ul的left值大于等于4张图片的宽度,就应该快速复原为0. html <!DO ...

  9. 解析JS运动

    解析JS运动 物体运动原理:通过改变物体的位置,而发生移动变化. 任何运动都是相对的,就像物理中的运动公式:s(要达到的)=s0(当前的样式值)+vt. 方法:      1.运动的物体使用绝对定位 ...

随机推荐

  1. 从NIPS2014大会看机器学习新趋势

    微软杰出科学家 John Platt 本文译自:Machine Learning Trends fromNIPS 2014 编者按:John Platt是微软的杰出科学家,也是微软在机器学习领域的领军 ...

  2. 探索真实事物的虚拟再现——微软亚洲研究院SIGGRAPH Asia 2014精彩入选论文赏析

    Asia 2014精彩入选论文赏析" title="探索真实事物的虚拟再现--微软亚洲研究院SIGGRAPH Asia 2014精彩入选论文赏析"> SIGGRAP ...

  3. linux上python3的安装

    我这里使用的时centos7-mini,centos系统本身默认安装有python2.x,版本x根据不同版本系统有所不同,可通过 python --V 或 python --version 查看系统自 ...

  4. Archives: 2013/6

    OpenStack环境搭建 这一步有两个选择: 一种就是正统的真实搭建,所有都按生产环境来部署,费时费力. 还有一种就是官方推荐的一键安装DevStack,直接安装最新的版本,体验最新的特性. 至于如 ...

  5. 微信小游戏广告位iphonex底部适配问题

    最近在公司开发游戏,使用cocos creator做微信小游戏,遇到一个很恶心的问题,如图: 如图所示,微信的广告位被iphonex的底部bar给弹出了一点位置,没有靠在底部. 在这里不得不吐槽一下微 ...

  6. SpringMVC学习笔记二:参数接受

    该项目用来介绍SpringMVC对参数接受的方法: 项目目录树:在前一个项目上修改添加 新添加了Student类和Group类,用来测试整体参数接受 Student.java package com. ...

  7. Caused by: com.alibaba.fastjson.JSONException: syntax error, expect {, actual [, pos 0, fastjson-version 1.2

    环境: vue.js 问题: 当添加评论时 重新查询数据刷新数据控制台异常Caused by: com.alibaba.fastjson.JSONException: syntax error, ex ...

  8. 测试一个数字是否等于 NaN

    ES6提供了一个新的 Number.isNaN() 函数,这是一个不同的函数,并且比老的全局 isNaN() 函数更可靠.

  9. toString和valueOf

    toString 今天在看以前写的代码时,遇到某个老师的点评: var obj = {};var root = [1, 2, 3];obj[root.join(',')] = value; 一看到这个 ...

  10. python 初学者

    明确学习目标,不急于求成 当下是一个喧嚣.浮躁的时代.我们总是被生活中大量涌现的热点所吸引,几乎没有深度阅读和思考的时间和机会.我始终认为,学习是需要沉下心来慢慢钻研的,是长 期的:同时,学习不应该被 ...