天天看點

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);

};

以上就是本文的全部内容,希望對大家的學習有所幫助,也希望大家多多支援腳本之家。