位置：首页>> 网络编程>> JavaScript>> 新浪微博文字渐隐效果

新浪微博文字渐隐效果

　　发布时间：2011-04-29 12:33:00　

标签：文字,微博

文字向下滾動，逐渐隐藏效果~ 挺好的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>微博显示效果 - www.cidianwang.com</title><style>#ul1 {background:white; margin:0px; padding:0px; width:500px; height:300px; border:1px solid black; overflow:hidden;}li {border-bottom:1px dashed #CCC; padding:15px 10px 3px 10px; margin:0px; list-style:none;}</style><script type="text/javascript">var arr=['洗脸也能抽筋？？', '好冷啊', '一口气睇晒《碟影重重》三部，头痛痛。一如既往地喜欢特务男，哈哈，有脑有身手', '我靠近你，不是因为你什么都好，不是因为你能给我一个安心而不错的未来，不是因为你是我的老公，不是因为我觉得我们肯定这一辈子会这样好好走下去，不是因为再找一段感情代价太大，而是因为，我爱你，我觉得看到你，就会心动。', '我承认我是个没有鼓励就没有动力的人，缺乏太多毅力。等过了这个冬天。也许我真的能把自己的心收拾干净。空出心里最重要的位置。给自己未来的新娘。剩下的空间，全是梦想，家庭和朋友。'];var t=setInterval(function(){var sTxt=arr.shift();createDom(sTxt);arr.push(sTxt);},2000)var bPause=false;function startMove(obj,attr,iTarget,fnMoveEnd){if(obj.timer){clearInterval(obj.timer);}obj.timer=setInterval(function(){if(bPause){return;}doMove(obj,attr,iTarget,fnMoveEnd);},30)};function getAttr(obj,attr){if(obj.currentStyle){return obj.currentStyle[attr];}else{return document.defaultView.getComputedStyle(obj,false)[attr];}}function doMove(obj,attr,iTarget,fnMoveEnd){var iSpeed=0;var weizhi=0;if(attr=="opacity"){weizhi=parseFloat(getAttr(obj,"opacity"));}else{weizhi=parseFloat(getAttr(obj,attr))}if(Math.abs(iTarget-weizhi)<1/100){clearInterval(obj.timer);obj.timer=null;if(fnMoveEnd){fnMoveEnd();}}else{iSpeed=(iTarget-weizhi)/8;if(attr=="opacity"){obj.style.filter="alpha(opacity:"+(weizhi+iSpeed)*100+")";obj.style.opacity=weizhi+iSpeed;}else{iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);obj.style[attr]=weizhi+iSpeed+"px";}}};function leaveMessage(){var oText=document.getElementById("txt1");createDom(oText.value);oText.value="";};function createDom(sTxt){var oUl=document.getElementById("ul1");var aLi=oUl.getElementsByTagName("li");var oLi=document.createElement("li");var iHeight=0;oLi.innerHTML=sTxt;oLi.style.filter="alpha(opacity:0)";oLi.style.opacity=0;if(aLi.length){oUl.insertBefore(oLi,aLi[0])}else{oUl.appendChild(oLi)}//开始运动iHeight=oLi.offsetHeight;oLi.style.height="0px";oLi.style.overflow='hidden';startMove(oLi,"height",iHeight,function(){startMove(oLi,"opacity",1)})oUl.onmouseover=function(){bPause=true;};oUl.onmouseout=function(){bPause=false;}};</script></head><body><ul id="ul1"></ul></body></html>

投稿

新浪微博文字渐隐效果

猜你喜欢