JS模擬的騰訊微博app撕紙效果的實(shí)例代碼

更新時(shí)間：2013年05月21日 10:16:41 作者：

本來想用css3來實(shí)現(xiàn)，但后來腦袋一熱就用了js，省的別人你ie怎么沒效果啊！在騰訊微博app上看到的一個(gè)效果，鼠標(biāo)擊哪里就撕了哪里，跟撕報(bào)紙似的，任意點(diǎn)擊左邊面的灰色區(qū)域，查看效果，當(dāng)時(shí)覺得很有意思，問了下高人，突然覺悟了，原來如此。。

<!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('//img.jbzj.com/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   id="8wko22w"   class="content" id="content">  <div   id="qousoso"   class="content">04-262.59MCerberus FTP Server 中文版 2.48FTP軟件04-253.55MWeb Page Maker簡(jiǎn)易網(wǎng)頁(yè)制作 v3.1網(wǎng)頁(yè)制作04-25990KRemote Desktop Spy服務(wù)器監(jiān)控、遠(yuǎn)程控制 v5.2服務(wù)器軟件04-252.20Kx3389遠(yuǎn)程端口修改器 1.0服務(wù)器軟件04-25210K遠(yuǎn)程桌面3389批量登錄軟件3.0遠(yuǎn)程控制04-25789KTable2CSS Table布局轉(zhuǎn)Div+CSS 3.0！04-2314.1Mjre1.6下載 | jre 1.6 JAVA虛擬機(jī)環(huán)境包編程開發(fā)04-2393.9KVC++正則表達(dá)式測(cè)試器編程開發(fā)04-2331.6K解除右鍵限制、網(wǎng)頁(yè)禁止復(fù)制功能的小軟件站長(zhǎng)工具04-231.49MDiagram Designer矢量圖編輯器。</div>  <div   id="omok0gc"   class="bg_sizhi" id="bg_sizhi">JS模擬的騰訊微博app撕紙效果</div>  <div   id="ucseyg2"   class="mack" id="mack"><div   id="oswigmw"   class="content content_mack"  id="content_mack">05-0114.3KC#自動(dòng)更換IP地址網(wǎng)絡(luò)相關(guān)05-0117.0KC#網(wǎng)絡(luò)發(fā)送與接收統(tǒng)計(jì)程序網(wǎng)絡(luò)相關(guān)05-0115.8K局域網(wǎng)IP掃描程序C#源碼網(wǎng)絡(luò)相關(guān)05-01411K前后平滑旋轉(zhuǎn)的jQuery網(wǎng)頁(yè)幻燈片代碼焦點(diǎn)幻燈05-01300KVB RichTextBox控件使用方法指南 pdfVB教程05-01925KVB 函數(shù)速查手冊(cè) pdfVB教程05-01509KHTML5和CSS全面動(dòng)畫效果的焦點(diǎn)圖特效焦點(diǎn)幻燈05-014.49K類似樹形菜單的jquery多級(jí)展開下拉菜單菜單導(dǎo)航05-0136.0K仿Flash背景左右滑動(dòng)的多彩網(wǎng)頁(yè)菜單菜單導(dǎo)航04-3016.9MJava范例開發(fā)大全一書光盤源代碼書籍源碼04-30916KAndroid與Js交互源碼實(shí)例Android滑動(dòng)菜單制作RenRenSlidingLayout代碼Android源碼04-30644KFlat UI HTML用戶界面常用代碼包Ajax/JavaScript04-3053.3KJavaScript仿百度百科詞條統(tǒng)計(jì)動(dòng)畫效果Ajax/JavaScript04-30267Kjquery由外向內(nèi)的收縮效果示例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;//假設(shè)運(yùn)動(dòng)已經(jīng)該停止了  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>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

您可能感興趣的文章: