首页 > 代码库 > 有滚动条的微博效果
有滚动条的微博效果
<style>
*{margin:0;padding:0;}
#uls{width:300px;height:300px;border:1px solid #FF0000;overflow:hidden;overflow-y:scroll;overflow-x:scroll;}
#uls li{border-bottom:1px solid #FF0000;}
</style>
<script src="http://www.mamicode.com/JavaScript/JS/move2.js"></script>
<script>
window.onload=function()
{
var oul=document.getElementById(‘uls‘);
var obtn=document.getElementById(‘btn‘);
var otxt=document.getElementById(‘txt‘);
obtn.onclick=function()
{
var aLi=document.createElement(‘li‘); //创建li元素
aLi.innerHTML=otxt.value;
otxt.value=http://www.mamicode.com/‘‘;
if(oul.children.length>0)
{
oul.insertBefore(aLi,oul.children[0]);
}
else
{
oul.appendChild(aLi);
}
//运动
//使得看起来，会有运动的效果
var iHeight=aLi.offsetHeight;
aLi.style.height=‘0‘;
startMove(aLi, {height: iHeight}, function (){
startMove(aLi, {opacity: 100});
});
}
}
</script>
</head>
<body>
<textarea id="txt" rows="5" cols="40"></textarea>
<input type="button" value="http://www.mamicode.com/发送" id="btn"/>
<ul id="uls"></ul>
</body>
有滚动条的微博效果