8点改变div大小之控制范围
2009-05-31 23:12
363 查看
还是模仿 不过在范围的计算上跟cloudgamer已经有了点比较大的差异了!~
感觉写的不够理想，代码有冗余，还得加把劲呀!~
我会再次修改的！~
<!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=gb2312" />
<title>wwww</title>
<style type="text/css">
#rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{
position:absolute;
background:#C00;
width:7px;
height:7px;
z-index:5;
font-size:0;
}
#rLeftDown,#rRightUp{cursor:ne-resize;}
#rRightDown,#rLeftUp{cursor:nw-resize;}
#rRight,#rLeft{cursor:e-resize;}
#rUp,#rDown{cursor:n-resize;}
#rRightDown{ bottom:-3px; right:-3px;}
#rLeftDown{ bottom:-3px; left:-3px;}
#rRightUp{ top:-3px; right:-3px;}
#rLeftUp{ top:-3px; left:-3px;}
#rRight{ right:-3px; top:50%}
#rLeft{ left:-3px; top:50%}
#rUp{ top:-3px; left:50%}
#rDown{ bottom:-3px; left:50%}
</style>
</head>
<body >
<div id='sss' style="height:500px; width:500px; border:1px solid #FF0000; left:30px; top:30px;z-index:1; position:absolute"></div>
<div id='ss' style="height:100px; width:100px; border:1px solid #000000; position:absolute; left:200px; top:200px; z-index:10" >
<div id="rRightDown"> </div>
<div id="rLeftDown"> </div>
<div id="rRightUp"> </div>
<div id="rLeftUp"> </div>
<div id="rRight"> </div>
<div id="rLeft"> </div>
<div id="rUp"> </div>
<div id="rDown"></div>
</div>
<div style=" top:560px; left:30px; border:1px solid #000000; position:absolute"><input value="设置最小范围" type="button" onclick="Setmin()" /><input value="取消最小范围" type="button" onclick="Cancelmin()" /><input value="设置容器范围" type="button" onclick="Setmax()" /><input value="取消容器范围" type="button" onclick="Cancelmax()" /></div>
<script>
var isIE = (document.all) ? true : false;
var $ = function (id) {
return document.getElementById(id);
};
var Class = {
create: function() {
return function() { this.initialize.apply(this, arguments); }
}
}
var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
}
var Bind = function(object, fun) {
return function() {
return fun.apply(object, arguments);
}
}
var BindAsEventListener = function(object, fun) {
var args = Array.prototype.slice.call(arguments).slice(2);
return function(event) {
return fun.apply(object, [event || window.event].concat(args));
}
}
var CurrentStyle = function(element){
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}
function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)};
function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)};
var Class = function(properties){
var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};
_class.prototype = properties;
return _class;
};
var Resize =new Class({
options:{
Max : false,
mxContainer : null,
mxLeft : 0,
mxRight : 9999,
mxTop : 0,
mxBottom : 9999,
Min : false,
minWidth : 20,
minHeight : 20,
onResize: function(){}
},
initialize:function(obj,options){
this._obj = obj;
this._resizeelm = null;
this._fR = BindAsEventListener(this,this.Resize);
this._fS = Bind(this,this.Stop);
/////////////////////////////////////////////////////////////////////
this.Max = this.options.Max;
this.mxContainer = this.options.mxContainer;
this.mxLeft = this.options.mxLeft;
this.mxTop = this.options.mxTop;
this.mxRight = this.options.mxRight;
this.mxBottom = this.options.mxBottom;
this.Min = this.options.Min;
this.minWidth = this.options.minWidth;
this.minHeight = this.options.minHeight;
this.onResize = this.options.onResize;
Extend(this,options);
/////////////////////////////////////////////////////////////////////
if(this.Max)
{
this.mxTop = parseInt(CurrentStyle(this.mxContainer).top);
this.mxRight = parseInt(CurrentStyle(this.mxContainer).left)+parseInt(CurrentStyle(this.mxContainer).width);
this.mxLeft = parseInt(CurrentStyle(this.mxContainer).left);
this.mxBottom = parseInt(CurrentStyle(this.mxContainer).top)+parseInt(CurrentStyle(this.mxContainer).height);
}
},
Set:function(resize, side){
if(!resize)return;
this._resizeelm = resize;
var fun;
switch(side.toLowerCase()){
case 'up':
fun = this.Up;
break;
case 'left':
fun = this.Left;
break;
case 'right':
fun = this.Right;
break;
case 'down':
fun = this.Down;
break;
case 'left-up':
fun = this.LeftUp;
break;
case 'right-up':
fun = this.RightUp;
break;
case 'left-down':
fun = this.LeftDown;
break;
case 'right-down':
fun = this.RightDown;
break;
default :
return;
}
addListener(this._resizeelm,'mousedown',BindAsEventListener(this, this.Start, fun))
},
Start:function(e,fun){
this._fun = fun;
this._original = [parseInt(CurrentStyle(this._obj).width),parseInt(CurrentStyle(this._obj).height),parseInt(CurrentStyle(this._obj).left),parseInt(CurrentStyle(this._obj).top)]
this._width = (parseInt(CurrentStyle(this._obj).left)||0) + parseInt(CurrentStyle(this._obj).width);
this._height = (parseInt(CurrentStyle(this._obj).top) ||0) + parseInt(CurrentStyle(this._obj).height);
//if(isIE){e.cancelBubble=true}else{e.preventDefault();}
addListener(document,'mousemove',this._fR);
addListener(document,'mouseup',this._fS);
},
Stop:function(){
removeListener(document, "mousemove", this._fR);
removeListener(document, "mousemove", this._fS);
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
},
Resize:function(e){
this._fun(e);
isIE?(this._resizeelm.onlosecapture=function(){this._fS}):(this._resizeelm.onblur=function(){this._fS})
},
Up:function(e){
this._height>e.clientY?this.RepairUp(e):this.TurnDown(e);
},
Right:function(e){
e.clientX>this._original[2]?this.RepairRight(e):this.TurnLeft(e);
},
Down:function(e){
e.clientY>this._original[3]?this.RepairDown(e):this.TurnUp(e);
},
Left:function(e){
e.clientX<this._width?this.RepairLeft(e):this.TurnRight(e);
},
RightUp:function(e){
this.Up(e);this.Right(e);
},
LeftUp:function(e){
this.Up(e);this.Left(e);
},
LeftDown:function(e){
this.Left(e);this.Down(e);
},
RightDown:function(e){
this.Right(e);this.Down(e);
},
RepairDown:function(e){
this._obj.style.top = this._original[3]+'px';
this._obj.style.height = (this.Max?Math.min(e.clientY,this.mxBottom):e.clientY) - this._original[3]+'px';
if(this.Min&&e.clientX-this._original<this.minHeight)
{
this._obj.style.height = this.minHeight+'px';
}
},
RepairLeft:function(e){
this._obj.style.left = (this.Max?Math.max(e.clientX,this.mxLeft):e.clientX) +'px';
this._obj.style.width = this._width-Math.max(e.clientX,this.mxLeft) + "px";
if(this.Min&&this._width-e.clientX<this.minWidth)
{
this._obj.style.left = this._width - this.minWidth +'px';
this._obj.style.width = this.minWidth+'px';
}
},
RepairUp:function(e){
this._obj.style.top = this.Max?Math.max(e.clientY,this.mxTop)+'px':e.clientY+'px';
this._obj.style.height = this._height-(this.Max?Math.max(e.clientY,parseInt(this.mxTop)):e.clientY )+ "px";
if(this.Min&&e.clientY>this._height-this.minHeight)
{
this._obj.style.top = this._height - this.minHeight +'px';
this._obj.style.height = this.minHeight +'px'
}
},
RepairRight:function(e){
this._obj.style.left = this._original[2]+'px';
this._obj.style.width =(this.Max?Math.min(this.mxRight,e.clientX):e.clientX) - this._original[2] +'px';
if(this.Min&&e.clientX-this._original[2]<this.minWidth)
{
this._obj.style.width = this.minWidth+'px';
}
},
TurnDown:function(e){
if(this.Min)
{
this._obj.style.top = this._height - this.minHeight +'px';
this._obj.style.height = this.minHeight +'px'
return;
}
this._obj.style.top = this._height+'px';
this._obj.style.height = Math.min(e.clientY,this.Max?parseInt(this.mxBottom):e.clientY) - this._height + 'px';
},
TurnLeft:function(e){
if(this.Min)
{this._obj.style.width = this.minWidth+'px';return;}
this._obj.style.left = (this.Max?Math.max(e.clientX,this.mxLeft):e.clientX) +'px';
this._obj.style.width = this._original[2]-parseInt(CurrentStyle(this._obj).left)+'px';
},
TurnRight:function(e){
if(this.Min)
{
this._obj.style.left = this._width - this.minWidth +'px';
this._obj.style.width = this.minWidth+'px';
return;
}
this._obj.style.left = this._width + 'px';
this._obj.style.width = (this.Max?Math.min(e.clientX,this.mxRight):e.clientX)- this._width +'px'
},
TurnUp:function(e){
if(this.Min)
{
this._obj.style.height = this.minHeight+'px';
return;
}
this._obj.style.top = (this.Max?Math.max(e.clientY,this.mxTop):e.clientY) +'px';
this._obj.style.height = this._original[3] - parseInt(CurrentStyle(this._obj).top) +'px';
}
});
var gg = new Resize($('ss'),{mxContainer:$('sss'),Max:true})
gg.Set($('rUp'),'up');
gg.Set($('rRight'),'right');
gg.Set($('rLeft'),'left');
gg.Set($('rDown'),'down');
gg.Set($('rRightUp'),'right-up');
gg.Set($('rLeftUp'),'left-up');
gg.Set($('rLeftDown'),'left-down');
gg.Set($('rRightDown'),'right-down');
///////////////////////////////////////////////////////////////////////////////////////
function Setmin(){
gg.Min = true;
}
function Cancelmin(){
gg.Min = false;
}
function Setmax(){
gg.Max = true;
}
function Cancelmax(){
gg.Max = false;
}
</script>
</body>
</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=gb2312" />
<title>wwww</title>
<style type="text/css">
#rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{
position:absolute;
background:#C00;
width:7px;
height:7px;
z-index:5;
font-size:0;
}
#rLeftDown,#rRightUp{cursor:ne-resize;}
#rRightDown,#rLeftUp{cursor:nw-resize;}
#rRight,#rLeft{cursor:e-resize;}
#rUp,#rDown{cursor:n-resize;}
#rRightDown{ bottom:-3px; right:-3px;}
#rLeftDown{ bottom:-3px; left:-3px;}
#rRightUp{ top:-3px; right:-3px;}
#rLeftUp{ top:-3px; left:-3px;}
#rRight{ right:-3px; top:50%}
#rLeft{ left:-3px; top:50%}
#rUp{ top:-3px; left:50%}
#rDown{ bottom:-3px; left:50%}
</style>
</head>
<body >
<div id='sss' style="height:500px; width:500px; border:1px solid #FF0000; left:30px; top:30px;z-index:1; position:absolute"></div>
<div id='ss' style="height:100px; width:100px; border:1px solid #000000; position:absolute; left:200px; top:200px; z-index:10" >
<div id="rRightDown"> </div>
<div id="rLeftDown"> </div>
<div id="rRightUp"> </div>
<div id="rLeftUp"> </div>
<div id="rRight"> </div>
<div id="rLeft"> </div>
<div id="rUp"> </div>
<div id="rDown"></div>
</div>
<div style=" top:560px; left:30px; border:1px solid #000000; position:absolute"><input value="设置最小范围" type="button" onclick="Setmin()" /><input value="取消最小范围" type="button" onclick="Cancelmin()" /><input value="设置容器范围" type="button" onclick="Setmax()" /><input value="取消容器范围" type="button" onclick="Cancelmax()" /></div>
<script>
var isIE = (document.all) ? true : false;
var $ = function (id) {
return document.getElementById(id);
};
var Class = {
create: function() {
return function() { this.initialize.apply(this, arguments); }
}
}
var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
}
var Bind = function(object, fun) {
return function() {
return fun.apply(object, arguments);
}
}
var BindAsEventListener = function(object, fun) {
var args = Array.prototype.slice.call(arguments).slice(2);
return function(event) {
return fun.apply(object, [event || window.event].concat(args));
}
}
var CurrentStyle = function(element){
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}
function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)};
function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)};
var Class = function(properties){
var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};
_class.prototype = properties;
return _class;
};
var Resize =new Class({
options:{
Max : false,
mxContainer : null,
mxLeft : 0,
mxRight : 9999,
mxTop : 0,
mxBottom : 9999,
Min : false,
minWidth : 20,
minHeight : 20,
onResize: function(){}
},
initialize:function(obj,options){
this._obj = obj;
this._resizeelm = null;
this._fR = BindAsEventListener(this,this.Resize);
this._fS = Bind(this,this.Stop);
/////////////////////////////////////////////////////////////////////
this.Max = this.options.Max;
this.mxContainer = this.options.mxContainer;
this.mxLeft = this.options.mxLeft;
this.mxTop = this.options.mxTop;
this.mxRight = this.options.mxRight;
this.mxBottom = this.options.mxBottom;
this.Min = this.options.Min;
this.minWidth = this.options.minWidth;
this.minHeight = this.options.minHeight;
this.onResize = this.options.onResize;
Extend(this,options);
/////////////////////////////////////////////////////////////////////
if(this.Max)
{
this.mxTop = parseInt(CurrentStyle(this.mxContainer).top);
this.mxRight = parseInt(CurrentStyle(this.mxContainer).left)+parseInt(CurrentStyle(this.mxContainer).width);
this.mxLeft = parseInt(CurrentStyle(this.mxContainer).left);
this.mxBottom = parseInt(CurrentStyle(this.mxContainer).top)+parseInt(CurrentStyle(this.mxContainer).height);
}
},
Set:function(resize, side){
if(!resize)return;
this._resizeelm = resize;
var fun;
switch(side.toLowerCase()){
case 'up':
fun = this.Up;
break;
case 'left':
fun = this.Left;
break;
case 'right':
fun = this.Right;
break;
case 'down':
fun = this.Down;
break;
case 'left-up':
fun = this.LeftUp;
break;
case 'right-up':
fun = this.RightUp;
break;
case 'left-down':
fun = this.LeftDown;
break;
case 'right-down':
fun = this.RightDown;
break;
default :
return;
}
addListener(this._resizeelm,'mousedown',BindAsEventListener(this, this.Start, fun))
},
Start:function(e,fun){
this._fun = fun;
this._original = [parseInt(CurrentStyle(this._obj).width),parseInt(CurrentStyle(this._obj).height),parseInt(CurrentStyle(this._obj).left),parseInt(CurrentStyle(this._obj).top)]
this._width = (parseInt(CurrentStyle(this._obj).left)||0) + parseInt(CurrentStyle(this._obj).width);
this._height = (parseInt(CurrentStyle(this._obj).top) ||0) + parseInt(CurrentStyle(this._obj).height);
//if(isIE){e.cancelBubble=true}else{e.preventDefault();}
addListener(document,'mousemove',this._fR);
addListener(document,'mouseup',this._fS);
},
Stop:function(){
removeListener(document, "mousemove", this._fR);
removeListener(document, "mousemove", this._fS);
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
},
Resize:function(e){
this._fun(e);
isIE?(this._resizeelm.onlosecapture=function(){this._fS}):(this._resizeelm.onblur=function(){this._fS})
},
Up:function(e){
this._height>e.clientY?this.RepairUp(e):this.TurnDown(e);
},
Right:function(e){
e.clientX>this._original[2]?this.RepairRight(e):this.TurnLeft(e);
},
Down:function(e){
e.clientY>this._original[3]?this.RepairDown(e):this.TurnUp(e);
},
Left:function(e){
e.clientX<this._width?this.RepairLeft(e):this.TurnRight(e);
},
RightUp:function(e){
this.Up(e);this.Right(e);
},
LeftUp:function(e){
this.Up(e);this.Left(e);
},
LeftDown:function(e){
this.Left(e);this.Down(e);
},
RightDown:function(e){
this.Right(e);this.Down(e);
},
RepairDown:function(e){
this._obj.style.top = this._original[3]+'px';
this._obj.style.height = (this.Max?Math.min(e.clientY,this.mxBottom):e.clientY) - this._original[3]+'px';
if(this.Min&&e.clientX-this._original<this.minHeight)
{
this._obj.style.height = this.minHeight+'px';
}
},
RepairLeft:function(e){
this._obj.style.left = (this.Max?Math.max(e.clientX,this.mxLeft):e.clientX) +'px';
this._obj.style.width = this._width-Math.max(e.clientX,this.mxLeft) + "px";
if(this.Min&&this._width-e.clientX<this.minWidth)
{
this._obj.style.left = this._width - this.minWidth +'px';
this._obj.style.width = this.minWidth+'px';
}
},
RepairUp:function(e){
this._obj.style.top = this.Max?Math.max(e.clientY,this.mxTop)+'px':e.clientY+'px';
this._obj.style.height = this._height-(this.Max?Math.max(e.clientY,parseInt(this.mxTop)):e.clientY )+ "px";
if(this.Min&&e.clientY>this._height-this.minHeight)
{
this._obj.style.top = this._height - this.minHeight +'px';
this._obj.style.height = this.minHeight +'px'
}
},
RepairRight:function(e){
this._obj.style.left = this._original[2]+'px';
this._obj.style.width =(this.Max?Math.min(this.mxRight,e.clientX):e.clientX) - this._original[2] +'px';
if(this.Min&&e.clientX-this._original[2]<this.minWidth)
{
this._obj.style.width = this.minWidth+'px';
}
},
TurnDown:function(e){
if(this.Min)
{
this._obj.style.top = this._height - this.minHeight +'px';
this._obj.style.height = this.minHeight +'px'
return;
}
this._obj.style.top = this._height+'px';
this._obj.style.height = Math.min(e.clientY,this.Max?parseInt(this.mxBottom):e.clientY) - this._height + 'px';
},
TurnLeft:function(e){
if(this.Min)
{this._obj.style.width = this.minWidth+'px';return;}
this._obj.style.left = (this.Max?Math.max(e.clientX,this.mxLeft):e.clientX) +'px';
this._obj.style.width = this._original[2]-parseInt(CurrentStyle(this._obj).left)+'px';
},
TurnRight:function(e){
if(this.Min)
{
this._obj.style.left = this._width - this.minWidth +'px';
this._obj.style.width = this.minWidth+'px';
return;
}
this._obj.style.left = this._width + 'px';
this._obj.style.width = (this.Max?Math.min(e.clientX,this.mxRight):e.clientX)- this._width +'px'
},
TurnUp:function(e){
if(this.Min)
{
this._obj.style.height = this.minHeight+'px';
return;
}
this._obj.style.top = (this.Max?Math.max(e.clientY,this.mxTop):e.clientY) +'px';
this._obj.style.height = this._original[3] - parseInt(CurrentStyle(this._obj).top) +'px';
}
});
var gg = new Resize($('ss'),{mxContainer:$('sss'),Max:true})
gg.Set($('rUp'),'up');
gg.Set($('rRight'),'right');
gg.Set($('rLeft'),'left');
gg.Set($('rDown'),'down');
gg.Set($('rRightUp'),'right-up');
gg.Set($('rLeftUp'),'left-up');
gg.Set($('rLeftDown'),'left-down');
gg.Set($('rRightDown'),'right-down');
///////////////////////////////////////////////////////////////////////////////////////
function Setmin(){
gg.Min = true;
}
function Cancelmin(){
gg.Min = false;
}
function Setmax(){
gg.Max = true;
}
function Cancelmax(){
gg.Max = false;
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 怎样使div居中显示 随窗口改变大小
- 模仿iframe框架，由分隔栏动态改变左右两侧div大小———基于jQuery
- jQuery实现动态分割div—通过拖动分隔栏实现上下、左右动态改变左右、上下两个相邻div的大小
- javascript: 改变和控制显示的图片大小
- 可拖动改变大小的div
- 可拖动可改变大小div的实现代码
- 拖拽改变div的大小
- 移动app开发,固定图片div宽高,根据实际图片大小控制图片不变形
- js实现div动态改变大小
- javascript 控制弹出式div页面大小,关闭
- div随着浏览器窗口大小变更，改变大小（resize）
- 鼠标拖拽改变div的大小
- 鼠标拖动改变DIV等网页元素的大小的最佳实践
- 图片自动随div大小改变
- 怎样改变Myeclipse中控制台的字体大小
- jquery拖动改变div大小
- 控制DIV内图片大小
- 纯js实现Div在页面垂直居中！可根据浏览器大小的改变而改变！兼容各种浏览器----神器版！
- 八点改变div大小
- 控制左边栏div高度自动改变 和右边div一样高