首页 > 安全资讯 >

新浪微博文字滚动效果

12-02-21

<!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-...

<!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>新浪微博文字滚动效果</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)
     }
     //开始运动  www.2cto.com
     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>
 <!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>新浪微博文字滚动效果</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>
 
 
 
摘自chaojie2009的专栏

相关文章
最新文章
热点推荐