Javascript 实现图片简易操作功能

通过 Javascript 实现图片的旋转、放大缩小、拖拽和放大镜功能，我觉得还是挺有意思的。今天把实现原理拿出来分享下。

实现图片的旋转功能

CSS3 的角度变换属性，可以帮助我们解决图片旋转功能。但是没有 CSS3 功能的 IE 低级版本咋办？有 filter。我们可以通过 Javascript 来切换图片的 Class 来实现。

需要的样式如下：

/**
 * @name: ui-transform
 * @desc: 用户旋转角度的样式表
 */
.ui-transform-1 {
    -moz-transform:rotate(90deg); 
    -webkit-transform:rotate(90deg); 
    transform:rotate(90deg); 
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.ui-transform-2 {
    -moz-transform:rotate(180deg); 
    -webkit-transform:rotate(180deg); 
    transform:rotate(180deg); 
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.ui-transform-3 {
    -moz-transform:rotate(270deg); 
    -webkit-transform:rotate(270deg); 
    transform:rotate(270deg); 
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

实现图片的放大缩小功能

这个比较简单，动态为图片更新样式，例如一开始是width:100%，我们可以动态变为width:120%或者width:80%。

需要注意的是：

对于图片标签的 CSS 需要无高度限制，无最大或者最小尺寸限制
动态添加的时候指定一个最大、最小的百分比
旋转了之后再放大缩小，最好能显示在对应的窗口（视区之内）

实现图片的拖拽功能

和其他的拖拽功能一样，通过 Javascript 实现拖拽功能的主要思路是：

绑定mousedown事件
在用户触发mousedown的函数里，继续绑定mousemove和mouseup事件
mousemove事件更新图片位置，实现拖拽功能
mouseup事件解绑mousemove处理内容

说起来虽然有点绕，请看代码：

//绑定 mousedown 事件
$(id).mousedown(function(e) {
    e.preventDefault(); //注意阻止默认事件
    …
    //绑定 mousemove 事件
    $(document).bind("mousemove", mouseMove);
    //绑定 mouseup 事件
    $(document).bind("mouseup", mouseUp);
});

function mouseMove(e) {
    e.preventDefault(); //注意阻止默认事件
    … //进行位置更新操作
}

function mouseUp(e) {
    e.preventDefault(); //注意阻止默认事件
    $(id).unbind("mousemove", mouseMove); //解绑 mousemove 事件
}

实现图片的放大镜功能

Javascript 实现图片编辑功能

如上图，图片的放大镜功能分为 2 个区域：一个是主内容区域，鼠标经过会有一个放大镜出现；一个是放大之后的图片显示区域。

完成这个放大镜的效果有一些麻烦，基本思路为：

获取放大镜的座标，包括移动时候的座标
取得放大镜的放大比例
鼠标移动，更新放大镜位置，同时更新右侧的放大图片显示的位置

假如你对放大镜这一块不是很清楚，简易参考 mg12 的几篇文章，这里不做详细介绍。

掌心

Javascript 实现图片简易操作功能

实现图片的旋转功能

实现图片的放大缩小功能

实现图片的拖拽功能

实现图片的放大镜功能