JS模拟的腾讯微博app撕纸效果

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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('//ku.shouce.ren/files/images/201601/56a320053259f.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！<br>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交互源码实例<br>
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>

AخA
 
<!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('//ku.shouce.ren/files/images/201601/56a320053259f.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;">

CSS代码

复制格式化注释注释颜色清空

放大

CSS代码...​x
 
​

JS代码

复制格式化注释注释清空

放大

JS代码...xxxxxxxxxx
 
​

运行代码

简介

请输入代码名称！

名称

JS模拟的腾讯微博app撕纸效果

分类

网站常用

描述

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