您的位置：首页 > Web前端 > JavaScript

javascript学习之运动框架

2013-12-19 09:59 423 查看

模仿新浪博客首页的，最新评论：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0; padding: 0;}
#ul1{width: 300px; height: 300px; border:1px solid #000; margin:0 auto;}
#ul1 div{list-style: none; border-bottom:1px dashed #000;padding: 2px;overflow: hidden;filter:alpha(opacity:0);opacity: 0;}
</style>
<script type="text/javascript" src="move.js"></script>
<script type="text/javascript">
window.onload = function(){
var oArea = document.getElementById("area");
var oBtn = document.getElementById("btn1");
var oUl = document.getElementById("ul1");
oBtn.onclick = function(){
var oLi = document.createElement("div");//创建内部Div
var aLi = oUl.getElementsByTagName('div');
oLi.innerHTML = oArea.value;
oArea.value = "";//点击发布后清空textarea
if(aLi.length){//如果内部已经有评论，那么就插入在第一个，否则就直接放在大的Div中
oUl.insertBefore(oLi,aLi[0]);
}else{
oUl.appendChild(oLi);
}
var iHeight = oLi.offsetHeight;//计算回复Div的高
oLi.style.height = 0;//将Div的高设置为0，完成下面的动画
startMove(oLi,{height:iHeight},function(){
startMove(oLi,{opacity:100});
});
}
};
function startMove(obj,json,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
for(var attr in json){
var iCur = 0;
if(attr == "opacity"){
iCur = parseInt(parseFloat(getStyle(obj,attr))*100);
}else{
iCur = parseFloat(getStyle(obj,attr));
}
var iSpeed = (json[attr]-iCur)/8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) :Math.floor(iSpeed);
if(json[attr] == iCur){
clearInterval(obj.timer);
if(fn){
fn();
}
}else{
if(attr == "opacity"){
obj.style.filter = 'filter:alpha(opacity:'+(iCur+iSpeed)+')';
obj.style.opacity = (iCur+iSpeed)/100;
}else{
obj.style[attr] = iCur+iSpeed+"px";
}
}
}
},30);
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
</script>
</head>
<body>
<textarea rows="10" cols="40" id="area"></textarea>
<input type="button" value="发布" id="btn1">
<div id="ul1">
</div>
</body>
</html>

View Code
菜鸟一个，大神路过就Ok了~~~

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航