<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

#ul1 { margin: 0; position: absolute; right: 10px; top: 8px; width: 700px; height: 500px; border: 1px solid #000; padding: 10px; overflow: hidden;}

li { line-height: 28px; border-bottom: 1px dotted #000; list-style: none; word-break: break-all; overflow: hidden;}

</style>

<script src="move.js"></script>

<script>

/*

先写出没有运动的效果，然后把赋值变成运动形式

*/

window.onload = function() {

    var oContent = document.getElementById('content');

    var oBtn = document.getElementById('btn');

    var oUl = document.getElementById('ul1');

    oBtn.onclick = function() {

        var oLi = document.createElement('li');

        oLi.innerHTML = oContent.value;

        if ( oUl.children[0] ) {

            oUl.insertBefore( oLi, oUl.children[0] );

        } else {

            oUl.appendChild( oLi );

        }

        //var iHeight = oLi.offsetHeight;

        var iHeight = parseInt( css(oLi, 'height') );

        oLi.style.height = '0px';

        oLi.style.opacity = '0';

        oLi.style.filter = 'alpha(opacity=0)';

        startMove(oLi, {

            height : iHeight,

            opacity : 100

        });

    }

}

</script>

</head>

<body>

    <textarea id="content" rows="10" cols="50"></textarea>

    <input type="button" value="留言" id="btn" />

    <ul id="ul1"></ul>

</body>

</html>

js运动 运动效果留言本的更多相关文章

  1. JS缓冲运动案例：右侧居中悬浮窗

    JS缓冲运动案例:右侧居中悬浮窗 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta cha ...

  2. JS缓冲运动案例：右下角悬浮窗

    JS缓冲运动案例:右下角悬浮窗 红色区块模拟页面的右下角浮窗,在页面进行滚动时,浮窗做缓冲运动,最终在页面右下角停留. <!DOCTYPE html> <html lang=&quo ...

  3. css3使用transform属性制作js弹性运动

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

  4. JS添加标签效果

    JS添加标签效果 在豆瓣网上添加自己的标签是一种常见的效果,今天也就做了一个简单的demo.由于时间的问题 我不多原理,大家可以试着操作几遍就能明白其中的原理了. JSFiddle的效果如下: 点击我 ...

  5. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  6. 用js实现动画效果核心方式

    为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...

  7. js拖拽效果

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

  8. 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  9. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

随机推荐

  1. Docker入门命令

    Edit Docker入门命令 # 安装镜像sudo docker pull ubuntu:12.04# 镜像列表sudo docker images# 运行镜像sudo docker run -t ...

  2. JSON 之 SuperObject(3): 访问

    测试数据提前加入 Memo1 中: 代码文件: unit Unit1; interface uses   Windows, Messages, SysUtils, Variants, Classes, ...

  3. 投影纹理映射（Projective Texture Mapping）

    摘抄“GPU Programming And Cg Language Primer 1rd Edition” 中文名“GPU编程与CG语言之阳春白雪下里巴人”  投影纹理映射( Projective ...

  4. HTML网页插入图像

    一.WEB上支持的图片格式: GIF:能保存256中颜色,支持透明色,支持动画效果 JPEG:不支持透明色和动画,颜色可达1670种 PNG:支持透明色,不支持动画,颜色有几种到1670种 二.将图片 ...

  5. 极限编程，最强N皇后JAVA解题代码，4秒出15皇后，33秒出16皇后

    私人博客原文链接来自:http://www.hexcode.cn/article/show/eight-queen 8皇后以及N皇后算法探究,回溯算法的JAVA实现,非递归,循环控制及其优化 8皇后以 ...

  6. bzoj1564: [NOI2009]二叉查找树

    dp. 首先这棵树是一个treap. 权值我们可以改成任意实数,所以权值只表示相互之间的大小关系,可以离散化. 树的中序遍历是肯定确定的. 用f[l][r][w]表示中序遍历为l到r,根的权值必须大于 ...

  7. 【笨嘴拙舌WINDOWS】GDI绘制区域

    在默认情况下,Gdi绘画操作的使用白纸(窗口的客户区)黑字(Pen的颜色)!前面我们已经讲过如何改笔,现在来学习改变白纸(GDI的绘制区域) 正常的纸为一个矩形形状!有时候小孩不小心撕掉纸的一角,不小 ...

  8. scala学习笔记(5)

    偏应用函数 举个例子 def sum(a: Int, b: Int, c: Int) = a + b + c val a = sum _ println(a(1,2,3)) 实际发生的事情是这样的:名 ...

  9. 【Python】logging模块学习笔记

    因为做接口自动化测试遇到的一个代码逻辑上的问题,又不知道具体问题出在哪里,所以在模块化代码之前,先学习下python的日志模块logging. 入门1 入门2 日志级别大小关系为:CRITICAL & ...

  10. for...else循环

    如果for循环完整结束,无break打断循环,那么执行else里面的内容,否则不执行. while True: n = raw_input('>') for x in n: if x == 'f ...