js實(shí)現(xiàn)類似新浪微博首頁(yè)內(nèi)容漸顯效果的方法
來(lái)源:易賢網(wǎng) 閱讀:746 次 日期:2015-04-13 14:04:34
溫馨提示:易賢網(wǎng)小編為您整理了“js實(shí)現(xiàn)類似新浪微博首頁(yè)內(nèi)容漸顯效果的方法”,方便廣大網(wǎng)友查閱!

要點(diǎn)一:

if(list_li.length>=1){

list.insertBefore(li,list_li[0]);

}else{

list.appendChild(li);

}

從在前面插入新內(nèi)容,如果沒有新內(nèi)容,就是在后面插入新內(nèi)容。

要點(diǎn)二:

var height=li.offsetHeight;

li.style.height='0';

取得li的高度,然后再li的高度設(shè)置為0,因?yàn)楦叨鹊淖兓菑?到現(xiàn)有高度。

要點(diǎn)三:

startrun(li,"height",height,function(){

startrun(li,"opacity","100");

})

先是高度變化,再是透明度變化

最后,上代碼:

<!DOCTYPE html>

<html>

<head>

<meta charset="gb2312" />

<title>無(wú)標(biāo)題文檔</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="發(fā)布">

<ul id="list">

</ul>

</body>

</html>

更多信息請(qǐng)查看IT技術(shù)專欄

更多信息請(qǐng)查看腳本欄目
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請(qǐng)考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)!

2025國(guó)考·省考課程試聽報(bào)名

  • 報(bào)班類型
  • 姓名
  • 手機(jī)號(hào)
  • 驗(yàn)證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡(jiǎn)要咨詢 | 簡(jiǎn)要咨詢須知 | 加入群交流 | 手機(jī)站點(diǎn) | 投訴建議
工業(yè)和信息化部備案號(hào):滇ICP備2023014141號(hào)-1 云南省教育廳備案號(hào):云教ICP備0901021 滇公網(wǎng)安備53010202001879號(hào) 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號(hào)
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號(hào):hfpxwx
咨詢QQ:526150442(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報(bào)警專用圖標(biāo)