码迷,mamicode.com
首页 > 其他好文 > 详细

有滚动条的微博效果

时间:2017-06-19 15:17:42      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:move   tee   before   htm   flow   滚动   ntb   set   art   

技术分享

 

<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="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=‘‘;
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="发送" id="btn"/>
<ul id="uls"></ul>
</body>

有滚动条的微博效果

标签:move   tee   before   htm   flow   滚动   ntb   set   art   

原文地址:http://www.cnblogs.com/xiaoyangtian/p/7048628.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!