新浪微博文字滾動效果 – Javascript教程_JS教程_技術文章 – 程式設計聯盟

<!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.aiwalls.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的專欄

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *