JavaScript简易缩放程序
一、前言：
上一篇随笔中已经把拖动程序完成了，这篇主要把缩放程序完成，后面合并后可以做成一个图片裁剪的功能
简易缩放程序DEMO：http://jsfiddle.net/UN99R/
限制缩放程序DEMO：http://jsfiddle.net/kHWQZ/
二、设计思路：
1、在一个可以缩放元素中，共有8个触发点(上、下、左、右、左上、右上、左下、右下)，首先分别设置好它们的CSS属性cursor值。
2、同拖放程序一样，在触发点上绑定鼠标按下事件，在文档(document)上绑定鼠标移动、弹起事件处理程序，在移动事件中，完成拖放元素css的操作，
在鼠标弹起事件中，解绑移动事件处理程序。
主要难点：在于如何处理拖放元素的CSS属性
三、源码实现细节：
在8个触发点的事件处理程序中，diffX, diffY 分别获取的是鼠标在移动与按下过程时指针的差值
var diffX = e.clientX - clientX, // 负数代表向左移动，反之向右
diffY = e.clientY - clientY; // 负数代表想上移动，反之向下
在鼠标按下事件处理中，w, h, l, t 分别记录的是拖放元素的width, height, left, top 属性值，下面讲一下鼠标移动处理程序
举一个示例：
up事件程序代码：
up = function(e){
var diffY = e.clientY - clientY;
$target.css({
height: h - diffY + 'px',
top: t + Math.min(diffY, h) + 'px'
});
e.preventDefault();
};
1、在up事件程序中，拖放元素变动的是height, top属性；
2、如果鼠标向上移动，diffY为负数，而height应增，因此 height = h - diffY, top则相反，top = t + diffY;
3、反之，diffY为正数，而height应减，因此 height = h - diffY, top = t + diffY;
4、为了让top值不为负数，top = t + Math.min(diffY, h);
最后阻止默认浏览器事件，避免鼠标拖动过程中出现禁止icon
处理完up事件后，其他down, left, right事件处理同理，而后 upLeft, upRight, downLeft, downRight 这些事件处理都是在叠加前四个事件处理就行了
主程序代码：
jQuery.fn.extend({
/**
* Autor: 博客园华子yjh 2014/02/26
*/
resize: function(options) {
var controlSelector = '.cursor-north, .cursor-south, .cursor-west, .cursor-east,' +
'.cursor-north-west, .cursor-north-east, .cursor-south-west, .cursor-south-east';
$(this).each(function(){
var
// 上、下、左、右、左上、右上、左下、右下 八个点的鼠标拖动时的事件处理程序
up, down, left, right, upLeft, upRight, downLeft, downRight,
// 鼠标拖动时的事件处理程序
handleEvent,
// 记录鼠标按下时鼠标的位置
clientX, clientY,
// 记录鼠标按下时元素的大小及位置
w, h, l, t,
// 目标元素
$target = $(this), self = this;
up = function(e){
var diffY = e.clientY - clientY;
$target.css({
height: h - diffY + 'px',
top: t + Math.min(diffY, h) + 'px'
});
e.preventDefault();
};
down = function(e){
var diffY = e.clientY - clientY;
$target.css({
height: h + diffY + 'px'
});
e.preventDefault();
};
left = function(e){
var diffX = e.clientX - clientX;
$target.css({
width: w - diffX + 'px',
left: l + Math.min(diffX, w) + 'px'
});
e.preventDefault();
};
right = function(e){
var diffX = e.clientX - clientX;
$target.css({
width: w + diffX + 'px'
});
e.preventDefault();
};
upLeft = function(e){
var diffX = e.clientX - clientX,
diffY = e.clientY - clientY;
$target.css({
height: h - diffY + 'px',
top: t + Math.min(diffY, h) + 'px',
width: w - diffX + 'px',
left: l + Math.min(diffX, w) + 'px'
});
e.preventDefault();
};
upRight = function(e){
var diffX = e.clientX - clientX,
diffY = e.clientY - clientY;
$target.css({
height: h - diffY + 'px',
top: t + Math.min(diffY, h) + 'px',
width: w + diffX + 'px'
});
e.preventDefault();
};
downLeft = function(e){
var diffX = e.clientX - clientX,
diffY = e.clientY - clientY;
$target.css({
width: w - diffX + 'px',
left: l + Math.min(diffX, w) + 'px',
height: h + diffY + 'px'
});
e.preventDefault();
};
downRight = function(e){
var diffX = e.clientX - clientX,
diffY = e.clientY - clientY;
$target.css({
width: w + diffX + 'px',
height: h + diffY + 'px'
});
e.preventDefault();
};
$target.delegate(controlSelector, 'mousedown', function(e){
var className = $(this).attr('class');
clientX = e.clientX;
clientY = e.clientY;
w = $target.width(),
h = $target.height(),
l = $target.get(0).offsetLeft,
t = $target.get(0).offsetTop;
// 根据触发元素的className选择要触发的事件处理程序
switch (className) {
case 'cursor-north':
handleEvent = up;
break;
case 'cursor-south':
handleEvent = down;
break;
case 'cursor-west':
handleEvent = left;
break;
case 'cursor-east':
handleEvent = right;
break;
case 'cursor-north-west':
handleEvent = upLeft;
break;
case 'cursor-north-east':
handleEvent = upRight;
break;
case 'cursor-south-west':
handleEvent = downLeft;
break;
case 'cursor-south-east':
handleEvent = downRight;
break;
default:
break;
}
$(document)
.bind('mousemove', handleEvent)
.bind('mouseup', function(){
$(document).unbind('mousemove', handleEvent);
$target.removeData('data-resize'); // 移除标志
});
$target.data('data-resize', true); // 缓存标志
});
});
return this;
}
});
带限制范围缩放代码：
jQuery.fn.extend({
/**
* Autor: 博客园华子yjh 2014/02/26
*/
resize: function(options) {
var defaultOptions, boundaryElem, limitObj, controlSelector;
controlSelector = '.cursor-north, .cursor-south, .cursor-west, .cursor-east, .cursor-north-west, .cursor-north-east, .cursor-south-west, .cursor-south-east';
defaultOptions = { // 默认配置项
boundaryElem: 'body' // 边界容器
};
options = jQuery.extend( defaultOptions, options || {} );
boundaryElem = $(options.boundaryElem).get(0);
limitObj = {
_left: boundaryElem.offsetLeft,
_top: boundaryElem.offsetTop,
_right: boundaryElem.offsetLeft + boundaryElem.clientWidth,
_bottom: boundaryElem.offsetTop + boundaryElem.clientHeight
};
$(this).each(function(){
var up, down, left, right, upLeft, upRight, downLeft, downRight,
clientX, clientY, w, h, l, t,
$target = $(this), self = this,
handleEvent = function(){};
up = function(e){
var diffY = e.clientY - clientY;
$target.css({
height: h + Math.min(0 - diffY, t) + 'px',
top: Math.max(t + Math.min(diffY, h), 0) + 'px'
});
e.preventDefault();
};
down = function(e){
var diffY = e.clientY - clientY;
$target.css({
height: h + Math.min(diffY, limitObj._bottom - limitObj._top - t - h) + 'px'
});
e.preventDefault();
};
left = function(e){
var diffX = e.clientX - clientX;
$target.css({
width: w + Math.min(0- diffX, l) + 'px',
left: Math.max(l + Math.min(diffX, w), 0) + 'px'
});
e.preventDefault();
};
right = function(e){
var diffX = e.clientX - clientX;
$target.css({
width: w + Math.min(diffX, limitObj._right - limitObj._left - l - w) + 'px'
});
e.preventDefault();
};
upLeft = function(e){
var diffX = e.clientX - clientX,
diffY = e.clientY - clientY;
$target.css({
height: h + Math.min(0 - diffY, t) + 'px',
top: Math.max(t + Math.min(diffY, h), 0) + 'px',
width: w + Math.min(0- diffX, l) + 'px',
left: Math.max(l + Math.min(diffX, w), 0) + 'px'
});
e.preventDefault();
};
upRight = function(e){
var diffX = e.clientX - clientX,
diffY = e.clientY - clientY;
$target.css({
height: h + Math.min(0 - diffY, t) + 'px',
top: Math.max(t + Math.min(diffY, h), 0) + 'px',
width: w + Math.min(diffX, limitObj._right - limitObj._left - l - w) + 'px'
});
e.preventDefault();
};
downLeft = function(e){
var diffX = e.clientX - clientX,
diffY = e.clientY - clientY;
$target.css({
width: w + Math.min(0- diffX, l) + 'px',
left: Math.max(l + Math.min(diffX, w), 0) + 'px',
height: h + Math.min(diffY, limitObj._bottom - limitObj._top - t - h) + 'px'
});
e.preventDefault();
};
downRight = function(e){
var diffX = e.clientX - clientX,
diffY = e.clientY - clientY;
$target.css({
width: w + Math.min(diffX, limitObj._right - limitObj._left - l - w) + 'px',
height: h + Math.min(diffY, limitObj._bottom - limitObj._top - t - h) + 'px'
});
e.preventDefault();
};
$target.delegate(controlSelector, 'mousedown', function(e){
var className = $(this).attr('class');
clientX = e.clientX;
clientY = e.clientY;
w = $target.width(),
h = $target.height(),
l = $target.get(0).offsetLeft,
t = $target.get(0).offsetTop;
switch (className) {
case 'cursor-north':
handleEvent = up;
break;
case 'cursor-south':
handleEvent = down;
break;
case 'cursor-west':
handleEvent = left;
break;
case 'cursor-east':
handleEvent = right;
break;
case 'cursor-north-west':
handleEvent = upLeft;
break;
case 'cursor-north-east':
handleEvent = upRight;
break;
case 'cursor-south-west':
handleEvent = downLeft;
break;
case 'cursor-south-east':
handleEvent = downRight;
break;
default:
break;
}
$(document)
.bind('mousemove', handleEvent)
.bind('mouseup', function(){
$(document).unbind('mousemove', handleEvent);
$target.removeData('data-resize'); // 移除标志
});
$target.data('data-resize', true); // 缓存标志
})
});
return this;
}
});
PS: 如有描述错误，请帮忙指正，如果你们有不明白的地方也可以发邮件给我，
JavaScript简易缩放程序的更多相关文章
- JavaScript简易教程（转）
原文:http://www.cnblogs.com/yanhaijing/p/3685304.html 这是我所知道的最完整最简洁的JavaScript基础教程. 这篇文章带你尽快走进JavaScri ...
- JavaScript简易教程
这是我所知道的最完整最简洁的JavaScript基础教程. 这篇文章带你尽快走进JavaScript的世界——前提是你有一些编程经验的话.本文试图描述这门语言的最小子集.我给这个子集起名叫做“Java ...
- J2msi 自己制作的把exe打成安装包简易GUI程序(第二版 带DLL注册)
J2msi 自己制作的把exe打成安装包简易GUI程序(第二版 带DLL注册) 之前那一版本(http://www.cnblogs.com/rojas/p/4794684.html)没考虑 DLL 注 ...
- JavaScript中国象棋程序（0） - 前言
“JavaScript中国象棋程序” 这一系列教程将带你从头使用JavaScript编写一个中国象棋程序.希望通过这个系列,我们对博弈程序的算法有一定的了解.同时,我们也将构建出一个不错的中国象棋程序 ...
- JavaScript中国象棋程序（1） - 界面设计
"JavaScript中国象棋程序" 这一系列教程将带你从头使用JavaScript编写一个中国象棋程序.这是教程的第1节. 这一系列共有9个部分: 0.JavaScript中国象 ...
- JavaScript中国象棋程序（2） - 校验棋子走法
"JavaScript中国象棋程序" 这一系列教程将带你从头使用JavaScript编写一个中国象棋程序.这是教程的第2节. 这一系列共有9个部分: 0.JavaScript中国象 ...
- JavaScript中国象棋程序（3） - 电脑自动走棋
"JavaScript中国象棋程序" 这一系列教程将带你从头使用JavaScript编写一个中国象棋程序.这是教程的第3节. 这一系列共有9个部分: 0.JavaScript中国象 ...
- JavaScript中国象棋程序（4） - 极大极小搜索算法
"JavaScript中国象棋程序" 这一系列教程将带你从头使用JavaScript编写一个中国象棋程序.这是教程的第4节. 这一系列共有9个部分: 0.JavaScript中国象 ...
- JavaScript中国象棋程序（5） - Alpha-Beta搜索
"JavaScript中国象棋程序" 这一系列教程将带你从头使用JavaScript编写一个中国象棋程序.这是教程的第5节. 这一系列共有9个部分: 0.JavaScript中国象 ...
随机推荐
- [CareerCup] 7.5 A Line Cut Two Squares in Half 平均分割两个正方形的直线
7.5 Given two squares on a two-dimensional plane, find a line that would cut these two squares in ha ...
- [CareerCup] 13.1 Print Last K Lines 打印最后K行
13.1 Write a method to print the last K lines of an input file using C++. 这道题让我们用C++来打印一个输入文本的最后K行,最 ...
- [MetaHook] R_SparkShower
By hzqst void R_SparkShower(float *pos) { TEMPENTITY *tent; tent = efx.CL_TempEntAllocNoModel(pos); ...
- 深入探究javascript的 {} 语句块
今日学习解析json字符串,用到了一个eval()方法,解析字符串的时候为什么需要加上括号呢?摸不着头脑.原来javascript中{}语句块具有二义性,不加括号会出错,理解这种二义性对我们理解jav ...
- 按照需要分别率长宽比导出图片（python 3）
效率提升的问题 之前朋友需要把大量的图片用分辨率进行区分查找,他说都是打开图片,然后用尺子在屏幕上量......我也是瀑布汗....花的点时间帮他写的小软件,解决这个蛋疼的问题 解决方案 本想用批处理 ...
- Unity3D 2D游戏中寻径算法的一些解决思路
需求 unity3d的3d开发环境中,原生自带了Navigation的组件,可以很便捷快速的实现寻路功能.但是在原生的2d中并没有相同的功能. 现在国内很多手机游戏都有自动寻路的功能,或者游戏中存在一 ...
- [USACO2003][poj2018]Best Cow Fences（数形结合+单调队列维护）
http://poj.org/problem?id=2018 此乃神题……详见04年集训队论文周源的,看了这个对斜率优化dp的理解也会好些. 分析: 我们要求的是{S[j]-s[i-1]}/{j-(i ...
- JDK的目录
要想深入了解Java必须对JDK的组成, 本文对JDK6里的目录做了基本的介绍,主要还是讲解 了下JDK里的各种可执行程序或工具的用途 Java(TM) 有两个平台 JRE 运行平台,包括Java虚拟 ...
- [转]SQL注入攻防入门详解
原文地址:http://www.cnblogs.com/heyuquan/archive/2012/10/31/2748577.html =============安全性篇目录============ ...
- hdu4333 扩展KMP
慢慢研究可以发现,可以用扩展kmp来求.由于扩展kmp的next[]只有一部分,当前位子前面那部分和母串的后部分,所以可以将字符串复制接在后面一次. 先求如果next[]>0&& ...