素材网 素材网

纯js实现漂亮弹窗支持拖拽改变大小-最小化-最大化-还原-关闭

下载资源()次

阅读次数()次

发布时间:2014-02-20

纯js实现漂亮弹窗支持拖拽改变大小-最小化-最大化-还原-关闭
分享到:

用法简介:

来源:xw素材网

纯js实现漂亮弹窗支持拖拽改变大小-最小化-最大化-还原-关闭。

js代码展示:

<script type="text/javascript">
/*-------------------------- +
获取id, class, tagName
+-------------------------- */
var get = {
byId: function(id) {
	return typeof id === "string" ? document.getElementById(id) : id
},
byClass: function(sClass, oParent) {
	var aClass = [];
	var reClass = new RegExp("(^| )" + sClass + "( |$)");
	var aElem = this.byTagName("*", oParent);
	for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
	return aClass
},
byTagName: function(elem, obj) {
	return (obj || document).getElementsByTagName(elem)
}
};
var dragMinWidth = 250;
var dragMinHeight = 124;
/*-------------------------- +
拖拽函数
+-------------------------- */
function drag(oDrag, handle)
{
var disX = dixY = 0;
var oMin = get.byClass("min", oDrag)[0];
var oMax = get.byClass("max", oDrag)[0];
var oRevert = get.byClass("revert", oDrag)[0];
var oClose = get.byClass("close", oDrag)[0];
handle = handle || oDrag;
handle.style.cursor = "move";
handle.onmousedown = function (event)
{
	var event = event || window.event;
	disX = event.clientX - oDrag.offsetLeft;
	disY = event.clientY - oDrag.offsetTop;
	document.onmousemove = function (event)
	{
		var event = event || window.event;
		var iL = event.clientX - disX;
		var iT = event.clientY - disY;
		var maxL = document.documentElement.clientWidth - oDrag.offsetWidth;
		var maxT = document.documentElement.clientHeight - oDrag.offsetHeight;
		iL <= 0 && (iL = 0);
		iT <= 0 && (iT = 0);
		iL >= maxL && (iL = maxL);
		iT >= maxT && (iT = maxT);
		oDrag.style.left = iL + "px";
		oDrag.style.top = iT + "px";
		return false
	};
	document.onmouseup = function ()
	{
		document.onmousemove = null;
		document.onmouseup = null;
		this.releaseCapture && this.releaseCapture()
	};
	this.setCapture && this.setCapture();
	return false
};	
//最大化按钮
oMax.onclick = function ()
{
	oDrag.style.top = oDrag.style.left = 0;
	oDrag.style.width = document.documentElement.clientWidth - 2 + "px";
	oDrag.style.height = document.documentElement.clientHeight - 2 + "px";
	this.style.display = "none";
	oRevert.style.display = "block";
};
//还原按钮
oRevert.onclick = function ()
{		
	oDrag.style.width = dragMinWidth + "px";
	oDrag.style.height = dragMinHeight + "px";
	oDrag.style.left = (document.documentElement.clientWidth - oDrag.offsetWidth) / 2 + "px";
	oDrag.style.top = (document.documentElement.clientHeight - oDrag.offsetHeight) / 2 + "px";
	this.style.display = "none";
	oMax.style.display = "block";
};
//最小化按钮
oMin.onclick = oClose.onclick = function ()
{
	oDrag.style.display = "none";
	var oA = document.createElement("a");
	oA.className = "open";
	oA.href = "javascript:;";
	oA.title = "还原";
	document.body.appendChild(oA);
	oA.onclick = function ()
	{
		oDrag.style.display = "block";
		document.body.removeChild(this);
		this.onclick = null;
	};
};
//阻止冒泡
oMin.onmousedown = oMax.onmousedown = oClose.onmousedown = function (event)
{
	this.onfocus = function () {this.blur()};
	(event || window.event).cancelBubble = true	
};
}
/*-------------------------- +
改变大小函数
+-------------------------- */
function resize(oParent, handle, isLeft, isTop, lockX, lockY)
{
handle.onmousedown = function (event)
{
	var event = event || window.event;
	var disX = event.clientX - handle.offsetLeft;
	var disY = event.clientY - handle.offsetTop;	
	var iParentTop = oParent.offsetTop;
	var iParentLeft = oParent.offsetLeft;
	var iParentWidth = oParent.offsetWidth;
	var iParentHeight = oParent.offsetHeight;
	document.onmousemove = function (event)
	{
		var event = event || window.event;
		var iL = event.clientX - disX;
		var iT = event.clientY - disY;
		var maxW = document.documentElement.clientWidth - oParent.offsetLeft - 2;
		var maxH = document.documentElement.clientHeight - oParent.offsetTop - 2;			
		var iW = isLeft ? iParentWidth - iL : handle.offsetWidth + iL;
		var iH = isTop ? iParentHeight - iT : handle.offsetHeight + iT;
		isLeft && (oParent.style.left = iParentLeft + iL + "px");
		isTop && (oParent.style.top = iParentTop + iT + "px");
		iW < dragMinWidth && (iW = dragMinWidth);
		iW > maxW && (iW = maxW);
		lockX || (oParent.style.width = iW + "px");
		iH < dragMinHeight && (iH = dragMinHeight);
		iH > maxH && (iH = maxH);
		lockY || (oParent.style.height = iH + "px");
		if((isLeft && iW == dragMinWidth) || (isTop && iH == dragMinHeight)) document.onmousemove = null;
		return false;	
	};
	document.onmouseup = function ()
	{
		document.onmousemove = null;
		document.onmouseup = null;
	};
	return false;
}
};
window.onload = window.onresize = function ()
{
var oDrag = document.getElementById("drag");
var oTitle = get.byClass("title", oDrag)[0];
var oL = get.byClass("resizeL", oDrag)[0];
var oT = get.byClass("resizeT", oDrag)[0];
var oR = get.byClass("resizeR", oDrag)[0];
var oB = get.byClass("resizeB", oDrag)[0];
var oLT = get.byClass("resizeLT", oDrag)[0];
var oTR = get.byClass("resizeTR", oDrag)[0];
var oBR = get.byClass("resizeBR", oDrag)[0];
var oLB = get.byClass("resizeLB", oDrag)[0];
drag(oDrag, oTitle);
//四角
resize(oDrag, oLT, true, true, false, false);
resize(oDrag, oTR, false, true, false, false);
resize(oDrag, oBR, false, false, false, false);
resize(oDrag, oLB, true, false, false, false);
//四边
resize(oDrag, oL, true, false, false, true);
resize(oDrag, oT, false, true, true, false);
resize(oDrag, oR, false, false, false, true);
resize(oDrag, oB, false, false, true, false);
oDrag.style.left = (document.documentElement.clientWidth - oDrag.offsetWidth) / 2 + "px";
oDrag.style.top = (document.documentElement.clientHeight - oDrag.offsetHeight) / 2 + "px";
}
</script>


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。