JS simulation of Tencent micro-blog app torn paper effect

 <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "

&lt;html xmlns= "http://www.w3.org/1999/xhtml" &gt; &lt;head&gt; &lt;meta http-equiv= "Content-type" content= "text/" html Charset=utf-8 "/&gt; &lt;title&gt; Tencent Weibo app tear paper effect &lt;/title&gt; &lt;style type=" Text/css "&gt; body{margin:0;padding:0; font-size:14px;line-height:22px;} . content,content_mack{width:300px;height:400px;overflow:hidden;font-size:12px;line-height:20px;background:# F2eee3;cursor:pointer;} . content_mack{position:absolute;top:0px;left:0; Mack{position:absolute;width:300px;height:50px;overflow: Hidden;top:0px;left:0px;background: #fff;} . Bg_sizhi{position:absolute;width:300px;height:50px;overflow:hidden;background:url (' 2013521101603617.gif '); : 0px;left:0;line-height:50px;text-align:center;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div style= "width:300px;height:400px;overflow:hidden;position: Relative;float:left; " &gt; &nbsp;&lt;div class= "Content" id= "content" &gt; &nbsp; &lt;div class= "content" &gt;04-262.59mcerberus FTP Server Chinese version 2.48FTP software 04-253.55mweb page maker Easy Web page making v3.1 webpageMake 04-25990kremote Desktop Spy server monitoring, remote control v5.2 Server Software 04-252.20kx3389 remote port modifier 1.0 Server Software 04-25210k Remote Desktop 3389 batch login Software 3.0 remote Control 04-25789KTABLE2CSS table layout turn DIV+CSS 3.0! 04-2314.1mjre1.6 Download | JRE 1.6 Java Virtual Machine Environment Package programming development 04-2393.9kvc++ Regular Expression Tester programming development 04-2331.6k to unlock the right key restrictions, the Web page does not copy the function of small software webmaster Tools 04-231.49mdiagram designer Vector diagram Editor. &lt;/div&gt; &nbsp; &lt;div class= "Bg_sizhi" id= "Bg_sizhi" &gt;js simulated Tencent Micro blog App tear paper effect &lt;/div&gt; &nbsp; &lt;div class= "Mack "Id=" Mack "&gt; &lt;div class=" Content content_mack "&nbsp;id=" Content_mack "&gt;05-0114.3kc# automatically replace IP address network related 05-0117.0KC #网络发送与接收统计程序网络相关05 -0115.8k LAN IP scanner C # source network related 05-01411k before and after smooth rotation of jquery page slide Code focus slideshow 05-01300KVB RichTextBox Control usage Guide PDFVB Tutorial 05-01925KVB Handbook of Function Quick Search PDFVB Tutorials 05-01509KHTML5 and CSS full animation effects Focus chart Effects focus slideshow 05-014.49k Similar to the tree menu of jquery multilevel expanded Drop-down menu navigation 05-0136.0k imitation flash background sliding around the colorful web page menu navigation 04-3016.9mja VA Example Development Encyclopedia of the CD source code book source 04-30916kandroid and JS Interactive Source example &nbsp; Android sliding menu to make Renrenslidinglayout code android 04-30644kflat UI HTML user Interface Common code package Ajax/javascript04-3053.3kjavascript imitation Baidu Encyclopedia entry statistics animation effect ajax/ Javascript04-30267kjquery from an outward-inside contraction effect example jquery04-306.41KDelphi mode Attribute Usage Example control Component 04-306.03kstartpos Property-delphi usage Other class 04-306.47knotifyvalue attribute usage One example Delphi source code other categories 04-30&lt;/div &gt; &nbsp; &lt;/div&gt; &nbsp;&lt;/div&gt; &lt;/div&gt; &lt;script&gt; &nbsp;function $ (ID) {/* Get ID */&nbsp; return type of id = = = "string"? document.getElementById (ID): ID; &NBSP} &nbsp;function getstyle (obj, attr) {&nbsp; Return Obj.currentstyle?obj.currentstyle[attr]:getcomputedstyle ( obj, false) [attr]; &NBSP} &nbsp;function startmove (obj, JSON, fnend) {&nbsp; if (Obj.timer) {&nbsp; &nbsp;clearinterval (obj.timer); &nbsp; } &nbsp; Obj.timer=setinterval (function () {&nbsp; &nbsp;domove (obj, JSON, fnend); &nbsp;}, 10); &nbsp;&nbsp; &nbsp; var odate=new Date (); &nbsp;&nbsp; &nbsp; if (Odate.gettime ()-obj.lastmove&gt;30) {&nbsp; &nbsp;domove (obj, JSON, fnend); &nbsp;} &nbsp;} & Nbsp;function domove (obj, JSON, fnend) {&nbsp; var icur=0 &nbsp; var attr= '; &nbsp; var bstop=true;//assume the campaign's already stopped. &nbsp; F or (attr in JSON) {&nbsp; Icur = attr== ' opacity ' parseint (100*parsefloat (obj, ' opacity ')):p arseint (GetStyle (obj, attr)); &nbsp; &nbsp;if (isNaN (icur)) {&nbsp; &nbsp; icur=0 &nbsp; &nbsp;} &nbsp; &nbsp;var ispeed= (json[attr]-icur)/8; &nbsp; &nbsp;ispeed=ispeed&gt;0? Math.ceil (ispeed): Math.floor (Ispeed); &nbsp; &nbsp;if (parseint (json[attr])!=icur) {&nbsp; &nbsp; bstop=false; &nbsp; &nbsp;} &nbsp; &nbsp;if (attr== ' opacity ') {&nbsp; &nbsp; obj.style.filter= alpha (opacity: "+ (Icur+ispeed) +)"; &nbsp; &nbsp; obj.style.opacity= (icur+ispeed)/ 100; &nbsp; &NBSP &nbsp; &nbsp;else{&nbsp; &nbsp; obj.style[attr]=icur+ispeed+ ' px '; &nbsp; &nbsp;} &nbsp;} &nbsp; if (bstop) {&nbsp; &nbsp;clearinterval (obj.timer) &nbsp; &nbsp;obj.timer=null; &nbsp; &nbsp; &nbsp; &nbsp;if (fnend) {&nbsp; &nbsp; Fnend (); &nbsp; &NBSP} &nbsp;} &nbsp;&nbsp; &nbsp; obj.lastmove= (New Date ()). GetTime (); &NBSP} &nbsp;var flag = 0; &nbsp;$ (' content '). onclick = function (ev) {&nbsp; var oevent=ev| | Event &nbsp; if (!flag) {&nbsp; &nbsp;var Y = oevent.clienty-25 &nbsp; &nbsp;y = y&lt;0?0:y; &nbsp; &NBsp Y = y&gt;350?350:y; &nbsp; &nbsp;$ (' Bg_sizhi '). Style.top = $ (' Mack '). Style.top = y+ ' px '; &nbsp; &nbsp;$ (' Content_mack '). Style.top =-y+ ' px '; &nbsp; &nbsp;startmove ($ (' Mack '), {' Left ':-300}); &nbsp; &nbsp;flag = 1; &nbsp;}else{&nbsp; &nbsp;startmove ($ (' Mack '), {' Left ': 0}); &nbsp; &nbsp;flag = 0; &nbsp;} &nbsp;&nbsp; &nbsp; &LT;/SCRI Pt&gt; &lt;/body&gt; &lt;/html&gt; &nbsp;