jQuery拖拽的遮罩层代码 - 手册网

小提示

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></title>
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
var mastArr = function(){
	return {
		"wrap" : "#maskWrap",//遮罩层总背景
		"move" : ".move",//拖拽
		"closeBox" : ".close",//关闭遮罩层
		"touch" : ".button",//触发遮罩层按钮
		"box"  : ".box",//遮罩层
		"pm"   :  5,	//拖动层由于父层 padding 、margin 、 position引起的间差,目前设置为手动调节
		"t"    :  300,	//移动速度
		"o"    :  0.20,	//遮罩透明度
		"k"    :  0.70,	//回弹速度
		"n"    :  10	//回弹次数
	};
}();

function Mask(arr)
{
	this.closeBox = arr.closeBox;
	this.wrap = arr.wrap;
	this.move = arr.move;
	this.touch = arr.touch;
	this.box = arr.box;
	this.pm = arr.pm;
	this.t = arr.t;
	this.k = arr.k;
	this.n = arr.n;
	this.o = arr.o;
}
Mask.prototype = {
	constructor : Mask,
	
	maskShow : function()
	{
		if(arguments.length == 0){
			
			$mask.maskShow(mastArr);
			
			return;
			
		} else {
			var arr = arguments[0];
			if(arr.wrap !== undefined){ this.wrap = arr.wrap; };
			if(arr.move !== undefined){ this.move = arr.move; };
			if(arr.touch !== undefined){ this.touch = arr.touch; };
			if(arr.closeBox !== undefined){ this.closeBox = arr.closeBox; };
			if(arr.box !== undefined){ this.box = arr.box; };
			if(arr.pm !== undefined){ this.pm = arr.pm; };
			if(arr.t !== undefined){ this.t = arr.t; };
			if(arr.k !== undefined){ this.k = arr.k; };
			if(arr.n !== undefined){ this.n = arr.n; };
			if(arr.o !== undefined){ this.o = arr.o; };
		};
		var _closeBox  =  $(this.closeBox),
		    _wrap  =  $(this.wrap),
			_move  =  $(this.move),
			_touch  =  $(this.touch),
			_box  =  $(this.box),
			pm =  this.pm,
		    t  =  this.t,
			k  =  this.k,
			o  =  this.o,
			n  =  this.n;
		
		var H = $(window).height(),
			W = $(window).width(),
			w = _box.width(),
			h = _box.height(),
		    v = $("body").height(),
		    bH = v - H >= 0 ? v : H;
		
		window.onresize = function(){
			H = $(window).height(),
			W = $(window).width(),
			v = $("body").height(),
			bH = v - H >= 0 ? v : H;
		};
			
		var flag = false,
			time = null,
			zd = {x:0, y:0},
			md = {x:0, y:0};
			
		_move.mousedown(function(e){
			var p = _move.offset();
			md.x = e.pageX - p.left;
			md.y = e.pageY - p.top;
			flag = true;
		});
		
		$(document).mousemove(function(e){
			
			if(flag){
				time = setTimeout(function(){
					z(e.pageX, e.pageY);
				}, 30);
				
				return false;
			};
			
		}).mouseup(function(){ flag = false; });
		
		function z(X, Y){
			
			zd.x = X - md.x - pm;
			zd.y = Y - md.y - pm;
			
			if(X - md.x <= 0){ zd.x = 0};
			if(Y - md.y <= 0){ zd.y = 0};
			if(zd.x >= W - w){ zd.x = W - w};
			if(zd.y >= bH - h){ zd.y = bH - h};
			
			if(X <= 0 || Y <= 0 || X >= W || Y >= bH){ flag = false; };
			
			_box.css({"left": zd.x + 'px', "top": zd.y + 'px'});
		};
		
		_touch.click(function(){
			
			var cH = H/2 - h/2 + $(window).scrollTop(),
				num = 1,
				j = 3;
			
			_wrap.show().css("height", bH + 'px').stop(true, false).animate({"opacity": o}, t, function(){
			_box.show().css({"left": W/2 - w/2 + 'px', "top": -h + 'px'}).stop(true, false).animate({"top": cH + 'px'}, t*k);
			
function start(n){
					
					num *= k;
					j *= 2;
					
					if(n<=1){ return false; }
					
					_box.animate({"top": cH - h/j + 'px'}, t*k*num).animate({"top": cH + 'px'}, t*k*num);
					
					arguments.callee(n-1);
				};
				
				start(n);
			});
			
			_wrap.clearQueue();
			
			return false;
		});
		
_closeBox.click(function(){
			_box.stop(true, false).animate({"top": -h + 'px'},{duration: t*6, queue: false})
			.delay(t/2, "del")
			.queue("del", function(next){
				$(this).stop(true, false).animate({"top": -h + 'px'}, t, function(){
					_wrap.animate({"opacity": 0}, t, function(){ $(this).hide(); });
					
					_box.hide();
				});
				next();
			}).dequeue("del");
			
			_box.clearQueue();
			
			return false;
		});
	}
};
var $mask = new Mask(mastArr);
	$(function(){
		$mask.maskShow({
			"o" : 0.50,
			"n" : 7
		});
	});
</script>
<style type="text/css">

</style>
</head>
<body>
	<div style="height:1800px"></div>
	<div class="box">
		<div class="content_wrap"></div>
		
		<div class="content">
			<div class="move">
				<a href="#" class="close">关闭</a>
			</div>
						
			<span></span>
		</div>
	</div>
	
	<button class="button">button</button>
	
	<div id="maskWrap"></div>
</body>
</html>

CSS代码

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

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

jQuery拖拽的遮罩层代码

分类

表格图层

描述

分享一款基于jQuery的拖拽遮罩层代码，引入了jQuery1.3.2版本，打开页面后，拖放至页面最底端，点击按钮即可弹出一个遮罩层，带弹性的缓冲效果，并且加入了关闭层的效果，在调用的时候，可以设置遮罩层背景、移动速度、透明度、回弹速度...

收藏