弹窗拖拽和放大缩小

PROMULGATOR

snow

北京市中国北京研究院

← jQuery ajax封装用方法

→ 回到顶部（原创）

相关代码

Html

Css


	
	
	
	
	
	
		 积分就能转动它哦！
		一人画了一个湖，湖面平静，好像一面镜子；另外还画了些远山和湖边的花草，让它们倒映在水面

body {
	font-family:'微软雅黑','arial';
}
* {
	padding:0;
	margin:0;
}
/* 弹窗 */
.m-xloginPanel {
	width:600px;
	height:300px;
	left:40px;
	top:40px;
	position:absolute;
	border:1px solid #3683cb;
	background:#fff;
}
.m-xloginPanel i {
	position:absolute;
	z-index:2;
}
.m-xloginPanel i.bart,.m-xloginPanel i.barb {
	height:4px;
	left:-1px;
	right:-1px;
	/*background:#ffc;
	*/cursor:n-resize;
}
.m-xloginPanel i.bart {
	top:-1px;
}
.m-xloginPanel i.barb {
	bottom:-1px;
}
.m-xloginPanel i.barr,.m-xloginPanel i.barl {
	width:4px;
	top:-1px;
	bottom:-1px;
	cursor:e-resize;
	/*background:#ffc;
	*/
}
.m-xloginPanel i.barl {
	left:-1px;
}
.m-xloginPanel i.barr {
	right:-1px;
}
.m-xloginPanel i.bar {
	width:14px;
	height:14px;
	cursor:nw-resize;
	bottom:-1px;
	right:-1px;
	background:url(../images/drag_ico.gif) no-repeat;
}
.m-xloginPanel .content {
	position:absolute;
	width:100%;
}
.m-xloginPanel .content h3 {
	font-weight:normal;
	color:#fff;
	font-size:24px;
	text-align:left;
	background:#3683cb;
	height:60px;
	line-height:60px;
	overflow:hidden;
	padding-left:20px;
	margin:4px;
	cursor:move;
}
.m-xloginPanel .content p {
	font-size:22px;
	color:#666;
	padding:10px 14px;
	text-indent:44px;
	line-height:36px;
	margin:0;
	z-index:3;
}

;(function($){
	$.fn.myPlugin = function(options) {
		var $doc = $(document);
		var defaults = {
			parentdraf : '.J-xloginPanel' , // 拖拽元素父级
			draftin : '.J-xloginPanel h3' , // 拖拽元素
			sizeLeft : '.J-xloginPanel .barl', // 改变大小左边
			sizeRight : '.J-xloginPanel .barr', // 改变大小右边
			sizeTop : '.J-xloginPanel .bart', // 改变大小上边
			sizeBottom : '.J-xloginPanel .barb',  // 改变大小下边
			sizeSkew : '.J-xloginPanel .bar'
		};
		var settings = $.extend({} , defaults, options);
		
		/* 拖拽 */
		$(settings.draftin).on('mousedown' , dragmove);
		function dragmove(event){
			event = event || window.event;
			var disX = event.pageX - $(settings.parentdraf).offset().left;
			var disY = event.pageY - $(settings.parentdraf).offset().top;
			$doc.on('mousemove',move);
			function move(event){
				event = event || window.event;
				var mouseX = event.pageX - disX;
				var mouseY = event.pageY - disY;
				var maxX = document.documentElement.clientWidth - $(settings.parentdraf).outerWidth(),
					maxY = document.documentElement.clientHeight - $(settings.parentdraf).outerHeight();
				if(mouseX < 0){
					mouseX = 0;
				}else if(mouseX > maxX){
					mouseX = maxX;
				}
				if(mouseY < 0){
					mouseY = 0;
				}else if(mouseY > maxY){
					mouseY = maxY;
				}
			   $(settings.parentdraf).css({'left' : mouseX+'px','top':mouseY+'px'});
			};
		};
		
		/* 左边 */
		$(settings.sizeLeft).on('mousedown' , function(event){
			event = event || window.event;
			var $this = $(this);
			var disX = $(settings.parentdraf).offset().left,
				drafw = $(settings.parentdraf).width();
			$doc.on('mousemove' , function(event){
				event = event || window.event;
				var mouseX = event.pageX;
				if(mouseX < 0)mouseX=0;
				$(settings.parentdraf).css({'left':mouseX +'px' , 'width':(disX-mouseX-4)+drafw +'px'})	
			});	
		});
		
		/* 右边 */
		$(settings.sizeRight).on('mousedown' , function(event){
			event = event || window.event;
			var $this = $(this);
			var disX = $(settings.parentdraf).offset().left;	
			$doc.on('mousemove' , function(event){
				event = event || window.event;
				var mouseX = event.pageX-disX,
					maxX = document.documentElement.clientWidth - disX - 2;
				if(mouseX > maxX)mouseX = maxX;	
				$(settings.parentdraf).css({'width':mouseX +'px'})	
			});	
		});
		
		/* 上边 */
		$(settings.sizeTop).on('mousedown' , function(event){
			event = event || window.event;
			var $this = $(this);
			var disY = $(settings.parentdraf).offset().top,
				drafH = $(settings.parentdraf).height();
			$doc.on('mousemove' , function(event){
				event = event || window.event;
				var mouseY = event.pageY,
					range = disY-mouseY-4;
				if(mouseY+4 > 0){
					$(settings.parentdraf).css({'top':mouseY +'px' , 'height':range+drafH +'px'});
				};
			});	
		});
		
		/* 下边 */
		$(settings.sizeBottom).on('mousedown' , function(event){
			event = event || window.event;
			var $this = $(this);
			var disY = $(settings.parentdraf).offset().top;	
			$doc.on('mousemove' , function(event){
				event = event || window.event;
				var mouseY = event.pageY-disY,
					maxY = document.documentElement.clientHeight - disY - 2;
				if(mouseY > maxY)mouseY = maxY;
				$(settings.parentdraf).css({'height':mouseY +'px'});	
			});	
		});
		
		/* 下斜 */
		$(settings.sizeSkew).on('mousedown' , function(event){
			event = event || window.event;
			var $this = $(this),
				disX = $(settings.parentdraf).offset().left,
				disY = $(settings.parentdraf).offset().top;
			$doc.on('mousemove' , function(event){
				event = event || window.event;
				var mouseX = event.pageX - disX + 14,
					mouseY = event.pageY - disY + 14,
					maxX = document.documentElement.clientWidth - disX - 2,
					maxY = document.documentElement.clientHeight - disY - 2;
				if(mouseX > maxX)mouseX = maxX;
				if(mouseY > maxY)mouseY = maxY;
				$(settings.parentdraf).css({'width':mouseX +'px' , 'height':mouseY + 'px'});	
			});
		});
		
		/* 松开鼠标 */
		$doc.mouseup(function(){ 
			$doc.off('mousedown')
			$doc.off('mousemove')
		});
	};
	$(document).ready(function(){
		$('body').myPlugin();
	});
})(jQuery);

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.1.4

立即下载

弹窗拖拽和放大缩小



代码描述：能移动的弹窗可以横向纵向的放大和缩小可以在浏览器内随意移动

引言
1.编写目的
统一HTML5在线开发工具代码风格，实现开发工程化，提高代码复用率，降低开发代码
开发规范
1.目录结构
    目录分为css、images、js 三个目录文件夹
2.css
    main.css  页面布局样式
3.images
页面所有图片
4.js
    a) jquery-1.7.1.js jQuery库
    b) scripts.js 封装拖拽插件
插件
1.插件名称 myPlugin
2.插件调用 $(元素).myPlugin(参数)
3.插件的基本定义
$.fn.myPlugin = function(options) { var defaults = {     参数1:''     参数2:'' }; var settings = $.extend({} , defaults, options); }
插件引用（scripts.js）
1.拖拽弹窗
    a) 参数 draftin : '.J-xloginPanel h3' 拖拽的元素
    b) 参数 parentdraf : '.J-xloginPanel' 拖拽元素父级
    c) 当鼠标按下时获取(当前x，y轴到父级的距离)
var disX = event.pageX - $(settings.parentdraf).offset().left var disY = event.pageY - $(settings.parentdraf).offset().top
    d) 当鼠标移动时获取(移动坐标，最大移动的距离)
var mouseX = event.pageX - disX var mouseX = event.pageY - disY var maxX = 浏览器宽度 - 弹窗宽度 var maxY = 浏览器高度 - 弹窗高度
    e) 移动的距离 mouseX mouseX
    f) 最大移动距离 maxX maxY
    g) 最小移动距离 0 0
    h) $(弹窗).css({'left' : mouseX, 'top':mouseY})
2.左边拖拽
a) 参数 sizeLeft : '.J-xloginPanel .barl' 左边拖拽
b) 当鼠标按下时获取父元素的宽度，父元素距离左边的距离
var disX = $(settings.parentdraf).offset().left var drafw = $(settings.parentdraf).width()
c) 当鼠标移动是获取移动距离 var mouseX = event.pageX
d) 最小距离 x=0
e) $(弹窗).css({'left':mouseX , 'width':(disX-mouseX)+drafw })
3.右边拖拽
a) 参数 sizeRight : '.J-xloginPanel .barr' 右边拖拽
b) 当鼠标按下时获取 disX = $(settings.parentdraf).offset().left
c) 当鼠标移动时获取
mouseX = event.pageX - disX
maxX = 浏览器宽度 - disX
d) 移动的最大距离 maxX
e) $(弹窗).css({'width':mouseX })
4.下边拖拽
a) 参数 sizeTop : '.J-xloginPanel .barb 上边拖拽
b) 当鼠标按下时获取父级距离浏览器的距离
disY = $(settings.parentdraf).offset().top
c) 当鼠标移动时获取移动坐标和最大移动的坐标
mouseY = event.pageY-disY
maxY = 浏览器宽 - disY
d) 最大距离 Y = maxY
e) $(弹窗).css({'height':mouseY })
5.右下拖拽
a) 参数 sizeSkew : '.J-xloginPanel .bar'
b) 当鼠标按下时获取父级距离左边的距离，父级距离上边的距离
disX = $(settings.parentdraf).offset().left
disY = $(settings.parentdraf).offset().top
c) 当鼠标移动时获取移动的坐标，移动范围最大的坐标
mouseX = event.pageX - disX
mouseY = event.pageY - disY
maxX = 浏览器宽 - disX
maxY =浏览器高 - disY
d) 最大距离 X = maxX Y = maxY
e) $(弹窗).css({'width':mouseX ， 'height':mouseY})

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>弹窗拖拽和放大缩小-jq22.com</title> <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号