Heim >Web-Frontend >js-Tutorial >JS模拟的腾讯微博app撕纸效果的实例代码_javascript技巧

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

WBOYOriginal: 2016-05-16 17:33:381080Durchsuche

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

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JQuery DataTable删除行后的页面更新利用Ajax解决_jqueryNächster Artikel：下拉菜单点击实现连接跳转功能的js代码_javascript技巧

In Verbindung stehende Artikel

Mehr sehen