JS Imitation Sina microblogging homepage content scrolling _ text effects

Source: Internet
Author: User
Then on Sina Weibo homepage still use Oh, maybe I write the code is not the best optimization state, but I think this is good.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> imitation Sina microblogging homepage content scrolling </title> <style type=" Text/css "> Body{background: #efc;} </style> </pead> <body> <!--col-act--> <div class= "Col-act" > <div class= "Colact-li St Clear "id=" Actdblist "> <!--turn--> <dl class=" clear "> <dt>--------------------------------- ----</dt> <dd>---------------------------------------</dd> <dd>------------------------- --------------</dd> </dl> <!--turn end--> </div> </div> <script type= "Text/javascr IPT ">/*--------------new Rolling----------------* * var _num=_n=0, _autohidden,_arrobj,_oheight; function Flilter (elem,i,t) {var o=document.getelementByid ("Actdblist"); if (!o) return false; var elem=o.getelementsbytagname ("DL") [0]; if (elem.movement) {cleartimeout (elem.movement); } if (!_n===0) _n = parseint (elem[' style '][!-[1,]? ' Filter ': ' opacity ']); if (_n>=i) {return true; } if (_n < i) {var dist = Math.ceil ((i-_n)/10); _n = _n + dist; } if (_n > i) {var dist = Math.ceil ((i-_n)/10); _n = _n-dist; } elem[' style '][!-[1,]? ' Filter ': ' Opacity ']=!-[1,]? ' Alpha (opacity= ' +_n+ ') ': _n/100; var repeat = "Flilter (' +elem+", "+i+", "+t+") "; Elem.movement = settimeout (repeat,t); function Moveelement (elem,final_y,interval) {var O=document.getelementbyid ("Actdblist"); if (!o) return false; var elem=o.getelementsbytagname ("DL") [0]; if (elem.movement) {cleartimeout (elem.movement); } if (!elem.style.height) {elem.style.height = "0"; var ypos = parseint (elem.style.height); if (ypos = = final_y) {flilter (O.getelementsbytagname ("DL") [0],100,40); return true; } if (Ypos < final_y) {var dist = Math.ceil ((Final_y-ypos)/10); ypos = ypos + dist; } if (Ypos > Final_y) {var dist = Math.ceil ((ypos-final_y)/10); Ypos = ypos-dist; } elem.style.height = ypos + "px"; var repeat = "moveelement (' +elem+", "+final_y+", "+interval+") "; Elem.movement = settimeout (repeat,interval); function Step (obj) {var _arro=document.getelementbyid ("DB"); if (!_arro) return false; var _arr=_arro.getelementsbytagname ("DL"); if (_autohidden) {clearinterval (_autohidden); } _n=0; _arrobj=_arr[_num]; _max=_arr.length; var O=document.getelementbyid (obj); var newnode= document.createelement ("DL"); O.insertbefore (Newnode,o.getelementsbytagname ("DL") [0]); var s=o.getelementsbytagname ("DL") [0]; S.style.csstext= "Height:0;opacity:0;filter:alpha (opacity=0); Overflow:hidden"; S.style.classname= "Clear"; s.innerhtml=_arrobj.innerhtml; _oheight=_arrobj.offsetheight; Moveelement (s,_oheight,10); var lastnode=o.getelementsbytagname ("DL") [(O.getelementsbytagname ("DL"). Length-1)]; Var Relastnode=o.removechild (Lastnode); _num++; if (_num>=_max) {_num=0; } stopmove ("Actdblist"); _autohidden = settimeout (function () {step (obj);},5000); function Stopmove (o) {var o=document.getelementbyid (o); if (!o) return false; O.onmouseover=function () {if (_autohidden) {cleartimeout (_autohidden); } o.onmouseout=function () {_autohidden = settimeout (function () {Step ("actdblist");},5000); }/*--------------new scrolling End----------------/* _autohidden = setinterval (function () {Step ("actdblist");},1000); Stopmove ("Actdblist"); </script> <div class= "" id= "DB" > <!----> <dl > <dt> I remember I loved (TV drama "Summer of Foam" theme song)-He Rundong </dt> </dl> <!----> <dl > <dd> #我最喜欢的书 # Definitely not the kind of romance and campus love, is boring, only read those books, I can not see a word. All the other books are like, hey. </dd> </dl> <!----> <dl > <dt> I'm going to fly again, so I want to die. Put a pair of scissors, really can't write anything, ready to insert from the head ......</dt> </dl> <!----> <dl > <dt> Some people have questioned my "fat, old, Can't sing". I have not put these words to heart. </dt&gT </dl> <!----> <dl > <dt> record mood, record life intravenous drip, welcome to the Tencent Weibo. </dt> <dd> Joy is impossible, happy from the heart! </dd> </dl> <!----> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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