DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> JS模擬的騰訊微博app撕紙效果
JS模擬的騰訊微博app撕紙效果
編輯:JavaScript綜合知識     

 <!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=utf-8" /> <title>騰訊微博app撕紙效果</title> <style type="text/css"> 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('http://files.jb51.net/file_images/article/201305/2013521101603617.gif');top:0px;left:0;line-height:50px;text-align:center;} </style> </head> <body> <div style="width:300px;height:400px;overflow:hidden;position: relative;float:left;">  <div class="content" id="content">   <div class="content">04-262.59MCerberus FTP Server 中文版 2.48FTP軟件04-253.55MWeb Page Maker簡易網頁制作 v3.1網頁制作04-25990KRemote Desktop Spy服務器監控、遠程控制 v5.2服務器軟件04-252.20Kx3389遠程端口修改器 1.0服務器軟件04-25210K遠程桌面3389批量登錄軟件3.0遠程控制04-25789KTable2CSS Table布局轉Div+CSS 3.0! 04-2314.1Mjre1.6下載 | jre 1.6 JAVA虛擬機環境包編程開發04-2393.9KVC++正則表達式測試器編程開發04-2331.6K解除右鍵限制、網頁禁止復制功能的小軟件站長工具04-231.49MDiagram 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">05-0114.3KC#自動更換IP地址網絡相關05-0117.0KC#網絡發送與接收統計程序網絡相關05-0115.8K局域網IP掃描程序C#源碼網絡相關05-01411K前後平滑旋轉的jQuery網頁幻燈片代碼焦點幻燈05-01300KVB RichTextBox控件使用方法指南 pdfVB教程05-01925KVB 函數速查手冊 pdfVB教程05-01509KHTML5和CSS全面動畫效果的焦點圖特效焦點幻燈05-014.49K類似樹形菜單的jquery多級展開下拉菜單菜單導航05-0136.0K仿Flash背景左右滑動的多彩網頁菜單菜單導航04-3016.9MJava范例開發大全一書光盤源代碼書籍源碼04-30916KAndroid與Js交互源碼實例   Android滑動菜單制作RenRenSlidingLayout代碼Android源碼04-30644KFlat UI HTML用戶界面常用代碼包Ajax/JavaScript04-3053.3KJavaScript仿百度百科詞條統計動畫效果Ajax/JavaScript04-30267Kjquery由外向內的收縮效果示例jQuery04-306.41KDelphi Mode屬性用法舉例控件組件04-306.03KStartPos屬性-Delphi用法其它類別04-306.47KNotifyValue屬性用法一例Delphi源代碼其它類別04-30</div>   </div>  </div> </div> <script>  function $(id){/* 獲取id */   return typeof id === "string" ? document.getElementById(id) : id;  }  function getStyle(obj, attr){   return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj, false)[attr];  }  function startMove(obj, json, fnEnd){   if(obj.timer){    clearInterval(obj.timer);   }   obj.timer=setInterval(function (){    doMove(obj, json, fnEnd);   }, 10);      var oDate=new Date();      if(oDate.getTime()-obj.lastMove>30){    doMove(obj, json, fnEnd);   }  }  function doMove(obj, json, fnEnd){   var iCur=0;   var attr='';   var bStop=true;//假設運動已經該停止了   for(attr in json){   iCur = attr=='opacity'?parseInt(100*parseFloat(getStyle(obj, 'opacity'))):parseInt(getStyle(obj, attr));    if(isNaN(iCur)){     iCur=0;    }    var iSpeed=(json[attr]-iCur)/8;    iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);    if(parseInt(json[attr])!=iCur){     bStop=false;    }    if(attr=='opacity'){     obj.style.filter="alpha(opacity:"+(iCur+iSpeed)+")";     obj.style.opacity=(iCur+iSpeed)/100;    }    else{     obj.style[attr]=iCur+iSpeed+'px';    }   }   if(bStop){    clearInterval(obj.timer);    obj.timer=null;        if(fnEnd){     fnEnd();    }   }      obj.lastMove=(new Date()).getTime();  }  var flag = 0;  $('content').onclick = function(ev){   var oEvent=ev||event;   if(!flag){    var Y = oEvent.clientY-25;    Y = Y<0?0:Y;    Y = Y>350?350:Y;    $('bg_sizhi').style.top = $('mack').style.top = Y+'px';    $('content_mack').style.top = -Y+'px';    startMove($('mack'),{'left':-300});    flag = 1;   }else{    startMove($('mack'),{'left':0});    flag = 0;   }     } </script> </body> </html>  
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved