淡入淡出文字滚动效果，来自新浪微博首页

发布时间：2018-08-22 13:46:59 所属栏目：PHP教程来源：站长网

导读：烈94火93网(LieHuo56.Net)教67程新浪微博首页的效果，最近有不少朋友仿这个效果，前些天发了好几个，今天才发一个，转载网上一位朋友的，写法与之前的不太相同，或许对你研究 Java Script有些帮助吧。演示代码： !DOCTYPE html PUBLIC -//W3C//DTD XHTM

　　烈94火93网(LieHuo56.Net)教67程 新浪微博首页的效果，最近有不少朋友仿这个效果，前些天发了好几个，今天才发一个，转载网上一位朋友的，写法与之前的不太相同，或许对你研究JavaScript有些帮助吧。

　　演示代码：

<!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.veryhuo.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) } //开始<b>运动</b> 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> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：淮安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

PHP如何指定文件的访问	php 创建目录与php删除
php include与require	php中的观察者模式简单