html5仿微博代码仿新浪微博,js仿新浪微博消息发布功能

本文实例为大家分享了js仿新浪微博消息发布的具体代码，供大家参考，具体内容如下

仿新浪微博消息发布功能

*{margin: 0; padding: 0;}

#div1{width: 400px; height: 400px; border: 1px solid; margin:10px auto; position: relative;overflow: hidden;}

#ul1 li{border-bottom: 1px #999 dashed; padding: 4px; list-style: none;filter: alpha(opacity:0);

opacity: 0;}

var oUl=document.getElementById('ul1');

var oTxt1=document.getElementById('txt1');

var oBtn=document.getElementById('btn1');

oBtn.οnclick=function()

{

var oLi=document.createElement('li');

oLi.innerHTML=oTxt1.value;

oTxt1.value='';

if(oUl.children.length>0)

{

oUl.insertBefore(oLi,oUl.children[0]);

}

else

{

oUl.appendChild(oLi);

}

var iHeight=oLi.offsetHeight;

oLi.style.height=0;

move(oLi,{height:iHeight},function()

{

move(oLi,{opacity:100});

});

}

chuan,js为之前写的完美运动框架：

function getstyle(obj,name)

{

if(obj.currentStyle)

{

return obj.currentStyle;

}

else

{

return getComputedStyle(obj,false)[name];

}

}

function move(obj,json,fnEnd)

{

clearInterval(obj.timer);

obj.timer=setInterval(function()

{

var bBox=true;//假设所有值都已经到了

for(var strr in json)

{

if(strr=='opacity')

{

var cur=Math.round(parseFloat(getstyle(obj,strr))*100);

}

else

{

var cur=parseInt(getstyle(obj,strr));

}

var speed=(json[strr]-cur)/10;

speed=speed>0?Math.ceil(speed):Math.floor(speed);

if(cur!=json[strr])

bBox=false;

if(strr=='opacity')

{

obj.style.filter='alpha(opacity:'+(cur+speed+')');

obj.style.opacity=(cur+speed)/100;

}

else

{

obj.style[strr]=cur+speed+'px';

}

}

if(bBox)

{

clearInterval(obj.timer);

if(fnEnd)fnEnd();

}

},30);

};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。