|
介绍：当在文本域写入文字，提交后直接显示在li标签中，这就是用到js语言，主要用于完成动画，所谓的动画就是通过获取元素，改变元素的某一属性，通过定时器的调用，从而形成一系列的动作，在我们的感官认识中则认为是动画。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 440px;
margin: 20px auto;
background-color: #999;
padding: 10px;
}
#tx1{ /* vertical-align 对于块级元素无效 */
vertical-align: middle;
outline: 5px double red; /*外框*/
/* resize: none; /*禁止文本域拖拽*/ */
}
#ull{
width: 390px;
height: 800px;
outline: 1px solid green;/* //外边框 */
overflow: hidden;/* //超出范围隐藏 */
margin-top: 10px;
}
li{
list-style: none;
border-bottom: 1px solid white;
overflow: hidden;
filter: alpha(opacity:0);
opacity: 0;
padding: 4px;
}
</style>
<script src="stardMove2.js"></script>
<script>
window.onload=function(){
var oTx = document.getElementById('tx1');//通过id获取组件
var oBtn = document.getElementById('btn1');
var oUl = document.getElementById('ull');
oBtn.onclick=function(){
var oLi = document.createElement('li'); //创建li标签
oLi.innerHTML=oTx.value;
oTx.value='';//清空文本域
if(oUl.children.length>0){//如果ul标签有子类
oUl.insertBefore(oLi,oUl.children[0]); //将新标签插入ul子类第一个孩子的前边
}else{
oUl.appendChild(oLi);
}
var iLHeight=oLi.offsetHeight;
// alert(iLHeight);
oLi.style.height='0';
startMove(oLi,{height:iLHeight},function(){
startMove(oLi,{opacity:100});
});
// alert(iLHeight);
};
};
1</script>
</head>
<body>
<div>
用户留言：<textarea id="tx1" rows="4" cols="40"></textarea>
<input id="btn1" value="发布" type="button" />
<ul id="ull"></ul>
</div>
</body>
</html>
可以直接复制到本地新建.html文件，使用浏览器打开，就能看到具体的效果。这篇实例重在练习js基本运动以及css基本。
|