本文实例讲述了javascript实现选择框按比例拖拉缩放的方法。分享给大家供大家参考。具体如下：
这里通过javascript实现可以像ps一样拉出一个选择框的效果。里面的很多方法都是我们值得学习的。
运行效果如下图所示：
具体代码如下：
<!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>javascript拖拉缩放效果</title>
</head>
<body>
<script>
var isie = (document.all) ? true : false;
var $ = function (id) {
return "string" == typeof id ? document.getelementbyid(id) : 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 addeventhandler(otarget, seventtype, fnhandler) {
if (otarget.addeventlistener) {
otarget.addeventlistener(seventtype, fnhandler, false);
} else if (otarget.attachevent) {
otarget.attachevent("on" + seventtype, fnhandler);
} else {
otarget["on" + seventtype] = fnhandler;
}
};
function removeeventhandler(otarget, seventtype, fnhandler) {
if (otarget.removeeventlistener) {
otarget.removeeventlistener(seventtype, fnhandler, false);
} else if (otarget.detachevent) {
otarget.detachevent("on" + seventtype, fnhandler);
} else {
otarget["on" + seventtype] = null;
}
};
//缩放程序
var resize = class.create();
resize.prototype = {
//缩放对象
initialize: function(obj, options) {
this._obj = $(obj);//缩放对象
this._stylewidth = this._styleheight = this._styleleft = this._styletop = 0;//样式参数
this._sideright = this._sidedown = this._sideleft = this._sideup = 0;//坐标参数
this._fixleft = this._fixtop = 0;//定位参数
this._scaleleft = this._scaletop = 0;//定位坐标
this._mxset = function(){};//范围设置程序
this._mxrightwidth = this._mxdownheight = this._mxupheight = this._mxleftwidth = 0;//范围参数
this._mxscalewidth = this._mxscaleheight = 0;//比例范围参数
this._fun = function(){};//缩放执行程序
//获取边框宽度
var _style = currentstyle(this._obj);
this._borderx = (parseint(_style.borderleftwidth) || 0) + (parseint(_style.borderrightwidth) || 0);
this._bordery = (parseint(_style.bordertopwidth) || 0) + (parseint(_style.borderbottomwidth) || 0);
//事件对象(用于绑定移除事件)
this._fr = bindaseventlistener(this, this.resize);
this._fs = bind(this, this.stop);
this.setoptions(options);
//范围限制
this.max = !!this.options.max;
this._mxcontainer = $(this.options.mxcontainer) || null;
this.mxleft = math.round(this.options.mxleft);
this.mxright = math.round(this.options.mxright);
this.mxtop = math.round(this.options.mxtop);
this.mxbottom = math.round(this.options.mxbottom);
//宽高限制
this.min = !!this.options.min;
this.minwidth = math.round(this.options.minwidth);
this.minheight = math.round(this.options.minheight);
//按比例缩放
this.scale = !!this.options.scale;
this.ratio = math.max(this.options.ratio, 0);
this.onresize = this.options.onresize;
this._obj.style.position = "absolute";
!this._mxcontainer || currentstyle(this._mxcontainer).position == "relative" || (this._mxcontainer.style.position = "relative");
},
//设置默认属性
setoptions: function(options) {
this.options = {//默认值
max: false,//是否设置范围限制(为true时下面mx参数有用)
mxcontainer:"",//指定限制在容器内
mxleft: 0,//左边限制
mxright: 9999,//右边限制
mxtop: 0,//上边限制
mxbottom: 9999,//下边限制
min: false,//是否最小宽高限制(为true时下面min参数有用)
minwidth: 50,//最小宽度
minheight: 50,//最小高度
scale: false,//是否按比例缩放
ratio: 0,//缩放比例(宽/高)
onresize: function(){}//缩放时执行
};
extend(this.options, options || {});
},
//设置触发对象
set: function(resize, side) {
var resize = $(resize), fun;
if(!resize) return;
//根据方向设置
switch (side.tolowercase()) {
case "up" :
fun = this.up;
break;
case "down" :
fun = this.down;
break;
case "left" :
fun = this.left;
break;
case "right" :
fun = this.right;
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" :
default :
fun = this.rightdown;
};
//设置触发对象
addeventhandler(resize, "mousedown", bindaseventlistener(this, this.start, fun));
},
//准备缩放
start: function(e, fun, touch) {
//防止冒泡(跟拖放配合时设置)
e.stoppropagation ? e.stoppropagation() : (e.cancelbubble = true);
//设置执行程序
this._fun = fun;
//样式参数值
this._stylewidth = this._obj.clientwidth;
this._styleheight = this._obj.clientheight;
this._styleleft = this._obj.offsetleft;
this._styletop = this._obj.offsettop;
//四条边定位坐标
this._sideleft = e.clientx - this._stylewidth;
this._sideright = e.clientx + this._stylewidth;
this._sideup = e.clienty - this._styleheight;
this._sidedown = e.clienty + this._styleheight;
//top和left定位参数
this._fixleft = this._styleleft + this._stylewidth;
this._fixtop = this._styletop + this._styleheight;
//缩放比例
if(this.scale){
//设置比例
this.ratio = math.max(this.ratio, 0) || this._stylewidth / this._styleheight;
//left和top的定位坐标
this._scaleleft = this._styleleft + this._stylewidth / 2;
this._scaletop = this._styletop + this._styleheight / 2;
};
//范围限制
if(this.max){
//设置范围参数
var mxleft = this.mxleft, mxright = this.mxright, mxtop = this.mxtop, mxbottom = this.mxbottom;
//如果设置了容器，再修正范围参数
if(!!this._mxcontainer){
mxleft = math.max(mxleft, 0);
mxtop = math.max(mxtop, 0);
mxright = math.min(mxright, this._mxcontainer.clientwidth);
mxbottom = math.min(mxbottom, this._mxcontainer.clientheight);
};
//根据最小值再修正
mxright = math.max(mxright, mxleft + (this.min ? this.minwidth : 0) + this._borderx);
mxbottom = math.max(mxbottom, mxtop + (this.min ? this.minheight : 0) + this._bordery);
//由于转向时要重新设置所以写成function形式
this._mxset = function(){
this._mxrightwidth = mxright - this._styleleft - this._borderx;
this._mxdownheight = mxbottom - this._styletop - this._bordery;
this._mxupheight = math.max(this._fixtop - mxtop, this.min ? this.minheight : 0);
this._mxleftwidth = math.max(this._fixleft - mxleft, this.min ? this.minwidth : 0);
};
this._mxset();
//有缩放比例下的范围限制
if(this.scale){
this._mxscalewidth = math.min(this._scaleleft - mxleft, mxright - this._scaleleft - this._borderx) * 2;
this._mxscaleheight = math.min(this._scaletop - mxtop, mxbottom - this._scaletop - this._bordery) * 2;
};
};
//mousemove时缩放 mouseup时停止
addeventhandler(document, "mousemove", this._fr);
addeventhandler(document, "mouseup", this._fs);
if(isie){
addeventhandler(this._obj, "losecapture", this._fs);
this._obj.setcapture();
}else{
addeventhandler(window, "blur", this._fs);
e.preventdefault();
};
},
//缩放
resize: function(e) {
//清除选择
window.getselection ? window.getselection().removeallranges() : document.selection.empty();
//执行缩放程序
this._fun(e);
//设置样式，变量必须大于等于0否则ie出错
with(this._obj.style){
width = this._stylewidth + "px"; height = this._styleheight + "px";
top = this._styletop + "px"; left = this._styleleft + "px";
}
//附加程序
this.onresize();
},
//缩放程序
//上
up: function(e) {
this.repairy(this._sidedown - e.clienty, this._mxupheight);
this.repairtop();
this.turndown(this.down);
},
//下
down: function(e) {
this.repairy(e.clienty - this._sideup, this._mxdownheight);
this.turnup(this.up);
},
//右
right: function(e) {
this.repairx(e.
以上就是详解javascript实现选择框按比例拖拉缩放方法的详细内容。