首頁 > 開發者 > JavaScript

新浪微博文字滾動效果

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More