弹窗拖拽和放大缩小

Html

Css

Js

	
	
	
	
	
	

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

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

统一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})