新浪微博文字渐隐效果

时间：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>

标签：文字,微博

投稿

新浪微博文字渐隐效果

猜你喜欢

SQLServer 游标简介与使用说明

为什么要登录？

一个较新的ASP后门服务端实现代码

mysql如何跨时区迁移数据

链接的提示及打开方式

不用加载Include文件也能生成选择列表吗？

《用户体验的要素》摘记

ASP中实现分页显示的七种方法

jQuery 1.3.3 新功能[译]

MySQL分区的功能和限制讲解

asp任何连接带密码的access数据库

用asp实现的获取文件夹中文件的个数的代码

js查找/搜索页面中的字符源代码

vertical-align表单元素垂直对齐

描述性列表的表现形式

ASP 相关文章或者相关产品

编写兼容IE和FireFox的脚本

CSS教程：轻松解决表格的nobr问题

两组字符串数据比较合并相同数据

PS笔刷，样式，形状、渐变、滤镜载入方式及使用