js实现类似新浪微博首页内容渐显效果的方法

本文实例讲述了js实现类似新浪微博首页内容渐显效果的方法。分享给大家供大家参考。具体分析如下：
要点一：

if（list_li.length>=1）{list.insertBefore（li,list_li[0]）;}else{list.appendChild（li）;}

从在前面插入新内容，如果没有新内容，就是在后面插入新内容。
要点二：

var height=li.offsetHeight;li.style.height="0";

取得li的高度，然后再li的高度设置为0,因为高度的变化是从0到现有高度。
要点三：

startrun（li,"height",height,function（）{startrun（li,"opacity","100"）;}）

先是高度变化，再是透明度变化
最后，上代码：

<！DOCTYPE html><html><head><meta charset="gb2312" /><title>无标题文档</title><style><！--body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}#list{width:400px; margin:10px auto;}#list li{list-style:none; padding:5px 0 ;overflow:hidden; border-bottom:1px dotted #ccc;filter:alpha（opacity:0）; opacity:0; vertical-align:middle;}--></style><script><！--window.onload = function（）{ var btn = document.getElementById（"btn"）; var con = document.getElementById（"con"）; var list = document.getElementById（"list"）; var list_li = list.getElementsByTagName（"li"）; btn.onclick = function（）{var li = document.createElement（"li"）;li.innerHTML = con.value;con.value="";if（list_li.length>=1）{ list.insertBefore（li,list_li[0]）;}else{ list.appendChild（li）;}var height=li.offsetHeight;li.style.height="0";startrun（li,"height",height,function（）{ startrun（li,"opacity","100"）;}） }}function getstyle（obj,name）{ if（obj.currentStyle）{return obj.currentStyle[name]; }else{return getComputedStyle（obj,false）[name]; }}function startrun（obj,attr,target,fn）{ clearInterval（obj.timer）; obj.timer = setInterval（function（）{var cur = 0;if（attr == "opacity"）{ cur = Math.round（parseFloat（getstyle（obj,attr））*100）;}else{ cur = parseInt（getstyle（obj,attr））;}var speed = （target-cur）/8;speed = speed>0?Math.ceil（speed）:Math.floor（speed）;if（cur == target）{ clearInterval（obj.timer）; if（fn）{fn（）; }}else{ if（attr == "opacity"）{obj.style.filter = "alpha（opacity="+（cur+speed）+"）";obj.style.opacity = （cur+speed）/100; }else{ obj.style[attr] = cur + speed + "px"; }} },30）}//--></script></head><body><textarea id="con" cols="50" rows="5"></textarea><input id="btn" name="" type="button" value="发布"><ul id="list"></ul></body></html>

希望本文所述对大家的javascript程序设计有所帮助。