熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

JS模擬的騰訊微博app撕紙效果

2013-11-15 12:09:33  來源: JSP教程 

  <!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "

<html xmlns=" <head> <meta httpequiv="ContentType" content="text/html; charset=utf" /> <title>騰訊微博app撕紙效果</title> <style type="text/css"> body{margin:;padding:;fontsize:px;lineheight:px;} contentcontent_mack{width:px;height:px;overflow:hidden;fontsize:px;lineheight:px;background:#feee;cursor:pointer;} content_mack{position:absolute;top:px;left:;} mack{position:absolute;width:px;height:px;overflow:hidden;top:px;left:px;background:#fff;} bg_sizhi{position:absolute;width:px;height:px;overflow:hidden;background:url();top:px;left:;lineheight:px;textalign:center;} </style> </head> <body> <div style="width:px;height:px;overflow:hidden;position: relative;float:left;">  <div class="content" id="content">   <div class="content">MCerberus FTP Server 中文版 FTP軟件MWeb Page Maker簡易網頁制作 v網頁制作KRemote Desktop Spy服務器監控遠程控制 v服務器軟件Kx遠程端口修改器 服務器軟件K遠程桌面批量登錄軟件遠程控制KTableCSS Table布局轉Div+CSS Mjre下載 | jre JAVA虛擬機環境包編程開發KVC++正則表達式測試器編程開發K解除右鍵限制網頁禁止復制功能的小軟件站長工具MDiagram Designer矢量圖編輯器</div>   <div class="bg_sizhi" id="bg_sizhi">JS模擬的騰訊微博app撕紙效果</div>   <div class="mack" id="mack"> <div class="content content_mack"  id="content_mack">KC#自動更換IP地址網絡相關KC#網絡發送與接收統計程序網絡相關K局域網IP掃描程序C#源碼網絡相關K前後平滑旋轉的jQuery網頁幻燈片代碼焦點幻燈KVB RichTextBox控件使用方法指南 pdfVB教程KVB 函數速查手冊 pdfVB教程KHTML和CSS全面動畫效果的焦點圖特效焦點幻燈K類似樹形菜單的jquery多級展開下拉菜單菜單導航K仿Flash背景左右滑動的多彩網頁菜單菜單導航MJava范例開發大全一書光盤源代碼書籍源碼KAndroid與Js交互源碼實例   Android滑動菜單制作RenRenSlidingLayout代碼Android源碼KFlat UI HTML用戶界面常用代碼包Ajax/JavaScriptKJavaScript仿百度百科詞條統計動畫效果Ajax/JavaScriptKjquery由外向內的收縮效果示例jQueryKDelphi Mode屬性用法舉例控件組件KStartPos屬性Delphi用法其它類別KNotifyValue屬性用法一例Delphi源代碼其它類別</div>   </div>  </div> </div> <script>  function $(id){/* 獲取id */   return typeof id === "string" ? documentgetElementById(id) : id;  }  function getStyle(obj attr){   return objcurrentStyle?objcurrentStyle[attr]:getComputedStyle(obj false)[attr];  }  function startMove(obj json fnEnd){   if(objtimer){    clearInterval(objtimer);   }   objtimer=setInterval(function (){    doMove(obj json fnEnd);   } );      var oDate=new Date();      if(oDategetTime()objlastMove>){    doMove(obj json fnEnd);   }  }  function doMove(obj json fnEnd){   var iCur=;   var attr=;   var bStop=true;//假設運動已經該停止了   for(attr in json){   iCur = attr==opacity?parseInt(*parseFloat(getStyle(obj opacity))):parseInt(getStyle(obj attr));    if(isNaN(iCur)){     iCur=;    }    var iSpeed=(json[attr]iCur)/;    iSpeed=iSpeed>?Mathceil(iSpeed):Mathfloor(iSpeed);    if(parseInt(json[attr])!=iCur){     bStop=false;    }    if(attr==opacity){     objstylefilter="alpha(opacity:"+(iCur+iSpeed)+")";     objstyleopacity=(iCur+iSpeed)/;    }    else{     objstyle[attr]=iCur+iSpeed+px;    }   }   if(bStop){    clearInterval(objtimer);    objtimer=null;        if(fnEnd){     fnEnd();    }   }      objlastMove=(new Date())getTime();  }  var flag = ;  $(content)onclick = function(ev){   var oEvent=ev||event;   if(!flag){    var Y = oEventclientY;    Y = Y<?:Y;    Y = Y>?:Y;    $(bg_sizhi)styletop = $(mack)styletop = Y+px;    $(content_mack)styletop = Y+px;    startMove($(mack){left:});    flag = ;   }else{    startMove($(mack){left:});    flag = ;   }     } </script> </body> </html>  
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20410.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.