<!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. 下拉刷新控件(4)SwipeRefreshLayout官方教程(上)如何在应用中使用它

    http://developer.android.com/training/swipe/add-swipe-interface.html 1,在布局xml和代码中使用它 2,在menu中添加它 The ...

  2. asp.net页面过滤所有换行符和多余空格

    不知道大家注意到了没有,Google和Baidu网页的HTML源代码是混合在一起的.HTML代码混合在一起,出发点是为了减小网页体积,从而加快网页加载速度. 写个函数把网页HTML源代码的换行符和空格 ...

  3. STL笔记（4）关于erase,remove

    STL笔记(4)关于erase,remove 你要erase的元素很容易识别.它们是从区间的“新逻辑终点”开始持续到区间真的终点的原来区间的元素.要除去那些元素,你要做的所有事情就是用那两个迭代器调用 ...

  4. Hibernate配置文件和映射元素解释

    象关系的映射是用一个XML文档来说明的.映射文档可以使用工具来生成,如XDoclet,Middlegen和AndroMDA等.下面从一个映射的例子开始讲解映射元素. AD:干货来了,不要等!WOT20 ...

  5. objective-c 与 js之间传递中文乱码

    最近在做关于js改写oc framework的小project,遇到了不少问题 其中刚遇到的是关于如何在两者之间传递中文字符,带特殊字符的URL字符串 不会很详细的介绍太多,以后会回头做个总结 oc传 ...

  6. ArcGis Javascript API (V3.6)加载天地图

    Arcgis的Javascript api开发很活跃,不知不觉都发布了3.6的版本了.该版本基于dojo 1.8.3开发的. 从dojo 1.8开始,AMD机制用得越来越多了,而且require([& ...

  7. 安卓WebView中接口隐患与手机挂马利用（远程命令执行）

    安卓应用存在安全漏洞,浏览网站打开链接即可中招.目前有白帽子提交漏洞表明目前安卓平台上的应用普遍存在一个安全漏洞,用户打开一个链接就可导致远程安装恶意应用甚至完全控制用户手机,目前微信,手机QQ,QV ...

  8. C++获取进程号及窗口

    #include <TlHelp32.h> //根据进程名获取进程ID BOOL GetPidByProcessName(TCHAR *pProcess, DWORD*dwPid) { H ...

  9. mongodb用户授权

    1)登录admin 数据库,admin是隐藏的数据库,为mongodb的超级管理员数据表mongo admin新建用户db.createUser({'user':'test','pwd':'12345 ...

  10. 用canvas实现图片滤镜效果详解之视频效果

    这是一个很有意思的特效,模拟摄像机拍摄电视屏幕画面时出现点状颗粒的效果.颗粒的大小通过变换矩阵实现,可以任意调节,有兴趣研究的朋友可以尝试更多的效果,代码没有经过优化,只是一个粗糙的Demo,大家可以 ...