<style>
body{padding: 0; margin: 0;}
#ul1{width: 400px; height: 400px; border: 1px solid black;margin: 10px auto; overflow: hidden;}
#ul1 li{border-bottom: 1px #999 dashed; padding: 4px; list-style: none; opacity: 0; filter:alpha(opacity:0); overflow: hidden;}
</style>
<script src="move.js"></script>
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}
//startMove(oDiv,{width:120,height:300,opacity:100},function(){ alert("结束");});
function startMove(obj,json,fnEnd){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var bStop=true; //假设:所有的值都已经执行到了目标结果
for(var attr in json){
var cur = 0;
if(attr=="opacity"){
cur = Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
cur = parseInt(getStyle(obj,attr));
}
var speed=(json[attr]-cur)/6;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(cur!=json[attr]){
bStop=false;
}
if(attr=="opacity"){
obj.style.filter='alpha(opacity:'+(cur+speed)+')';
obj.style[attr]=(cur+speed)/100;
}else{
obj.style[attr]=cur+speed+"px";
}
}
if(bStop){
clearInterval(obj.timer);
if(fnEnd)fnEnd();
}
},30);
}
<script>
window.onload=function(){
var oBtn = document.getElementById("btn");
var oUl = document.getElementById("ul1");
var oTxt = document.getElementById("txt1");
oBtn.onclick=function(){
var oLi = document.createElement("li");
oLi.innerHTML=oTxt.value;
oTxt.value="";
if(oUl.children.length>0){
oUl.insertBefore(oLi,oUl.children[0]);
}else{
oUl.appendChild(oLi);
}
//运动
var iHeight=oLi.offsetHeight;
oLi.style.height='0';
startMove(oLi,{height:iHeight},function(){
startMove(oLi,{opacity:100});
});
};
};
</script>
<textarea id="txt1" cols="30" rows="10"></textarea>
<input type="button" id="btn" value="提交">
<ul id="ul1">
</ul>
上一篇:
js鼠标事件跟随效果
友情提示:垃圾评论一律封号...