JS模拟的腾讯微博app撕纸效果的实例代码

更新时间：2013年05月21日 10:16:41 作者：

本来想用css3来实现，但后来脑袋一热就用了js，省的别人你ie怎么没效果啊！在腾讯微博app上看到的一个效果，鼠标击哪里就撕了哪里，跟撕报纸似的，任意点击左边面的灰色区域，查看效果，当时觉得很有意思，问了下高人，突然觉悟了，原来如此。。

<!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 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>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

app
撕纸

JavaScript自动生成24小时时间区间
这篇文章主要介绍了JavaScript自动生成24小时时间区间，就以时间区间为字符串展开主题香瓜内容，需要的朋友可以参考一下
2022-06-06
js+css实现飞机大战游戏
这篇文章主要为大家详细介绍了js+css实现飞机大战游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-05-05
JavaScript 变量作用域分析
变量作用域是程序中定义这个变量的区域。先贴一段代码，如果读者对代码的输出并不感到困惑就不用往下面读了。
2011-07-07
localstorage实现带过期时间的缓存功能
这篇文章主要介绍了localstorage实现带过期时间的缓存功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-06-06
C++中的string类的用法小结
通过在网站上的资料搜集，得到了很多关于string类用法的文档，通过对这些资料的整理和加入一些自己的代码，就得出了一份比较完整的关于string类函数有哪些和怎样用的文档了！
2015-08-08
layui-table表复选框勾选的所有行数据获取的例子
今天小编就为大家分享一篇layui-table表复选框勾选的所有行数据获取的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
JS在Array数组中按指定位置删除或添加元素对象方法示例
这篇文章主要给大家介绍了关于JS在Array数组中按指定位置删除或添加元素对象的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JS具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-11-11
javascript显示中文日期的方法
这篇文章主要介绍了javascript显示中文日期的方法,涉及javascript针对日期与字符串操作技巧,需要的朋友可以参考下
2015-06-06
用javascript作一个通用向导说明
向导可以让你的网站用户快速上手使用你的web应用，提高网站的吸引力。向导一般分为好几个步骤，每个步骤收集一些数据，并且支持退回功能，所有步骤完成后可以得到每一步的收集结果。这里给大家展示一种比较通用，灵活且简单的向导框架。
2011-08-08
JS中的算法与数据结构之列表(List)实例详解
这篇文章主要介绍了JS中的算法与数据结构之列表(List),结合实例形式分析了javascript列表的概念、原理以及定义、添加、删除、查找等相关操作技巧,需要的朋友可以参考下
2019-08-08

JS模拟的腾讯微博app撕纸效果的实例代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具