js运动运动效果留言本

<!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>

转载于:https://www.cnblogs.com/mayufo/p/4349108.html

js运动运动效果留言本相关推荐

利用p5.js进行“运动”主题的绘画创作
利用p5.js进行"运动"主题的绘画创作主题用码绘和手绘两种方式创作"运动"主题的作品,对比二者在表现"动态"方面的异同. 码绘工具 ...
php3D动画,html5的canvas实现几何模型3D运动动画效果
html5的canvas实现几何模型3D运动动画效果 JS片段: var {atan2,sqrt,sin,cos,PI,acos} = Math; function project3D(x,y,z,v ...
js浮动运动函数html,JS+CSS动态绘制元素曲线运动轨迹(数学函数)
相信许多小伙伴都想知道CSS+JS如何实现物体的曲线运动吧! 其实原理就是运用数学用的函数公式,本文运用的是sin函数上进行的基础变形. 今天的主要目标就是让这张图的里足球运动起来. 首先肯定要先把这 ...
JS完美运动框架详解——原理分析及demo
1.运动原理 Js运动,本质来说,就是让 web 上 DOM 元素动起来.而想要 DOM 动起来,改变其自身的位置属性,比如高宽,左边距,上边距,透明度等.还有一个很重要的前提是,运动的物体必须是绝对 ...
单位载质量能量消耗量_这样运动减肥效果最好！附：运动能量消耗表
提到减肥,怎么能少了运动?但是很多朋友对每天要运动多久,做什么运动合适等问题不是特别清楚. 根据中国营养学会的推荐要求,成年人的活动量基本要求为: ■ 每天至少快走6000步,大约30~60分钟: ■ ...
p5.js的“运动”主题创作
用p5.js 进行"运动"主题创作第四维即时间(根据爱因斯坦相对论),在时间上的重复,在传统静态绘画中是不可能实现的,但用编程就可以做到. 在各种自媒体平台上,我们会看到很多会& ...
html萤火虫特效代码,原生JS实现萤火虫效果
本文实例为大家分享了JS实现萤火虫效果的具体代码,供大家参考,具体内容如下上代码之前,先看一下效果: CSS部分(此处用元素模拟萤火虫,背景可自行设置): .box{width: 4px;heigh ...
分享112个JS特效动画效果，总有一款适合您
分享112个JS特效动画效果,总有一款适合您 112个JS特效动画效果下载链接:https://pan.baidu.com/s/1uC61pccye_oYqBnUugIuig?pwd=u21z 提取 ...
分享113个JS特效动画效果，总有一款适合您
分享113个JS特效动画效果,总有一款适合您 113个JS特效动画效果下载链接:https://pan.baidu.com/s/1k0fyflcyTKQM9pYEif2f9g?pwd=hpa8 提取 ...

js运动运动效果留言本

js运动运动效果留言本相关推荐

最新文章

热门文章

js运动 运动效果留言本

js运动 运动效果留言本相关推荐

最新文章

热门文章

js运动运动效果留言本

js运动运动效果留言本相关推荐