您的位置:首页 > 其它

新浪微博之链式运动

2016-08-24 09:53 225 查看
1、要想类似高度的属性达到自适应:(1)获取当前元素此属性值var iHeight=offsetHight(2)再把属性值为0(3)引入完美运动框架,将iHeight设为目标值

2、ul下加li会出现卡顿情况,原因是布局导致,解决方案是,将ul和li均换成div

3、

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
#ul1{width:300px; height:300px;border:1px solid #000000;margin:10px auto;}
#ul1 div{list-style: none;padding:2px;border-bottom: 1px dashed #000000;
overflow: hidden;filter:alpha(opacity=0);opacity:0;}
</style>
<script src="move+1.js"></script>
<script>
window.onload=function(){
var oTxt1=document.getElementById('txt1');
var oBtn1=document.getElementById('btn1');
var oUl1=document.getElementById('ul1');
var aLi=oUl1.getElementsByTagName('div');
oBtn1.onclick=function(){
var oLi=document.createElement('div');
oLi.innerHTML=oTxt1.value;
oTxt1.value="";
if(aLi.length){
oUl1.insertBefore(oLi,aLi[0]);
}else {
oUl1.appendChild(oLi);
}
var iHeight=oLi.offsetHeight;
oLi.style.height=0;
startMove(oLi,{height:iHeight},function(){
startMove(oLi,{opacity:100});
});
}
}
</script>
</head>
<body>
<textarea id="txt1" rows="10" cols="40"></textarea><br/>
<input  id="btn1" type="button" value="发布">
<div id="ul1"></div>
</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: