再修改csdn头像的时候，看到上传头像的功能，忽然心血来潮像自己搞一个。
分析了一下功能需要做的事情：
1.一个div，里面存放头像图片，再加一个div来给用户选择头像区域，最后再来个区域存放结果图
2.一堆js事件促发：mousedown事件 mouseup事件 mousemove事件
2.1.移动方框区域，结果图图片跟着动的事件顺序：
1）选中区域内musedown 记录鼠标原始位置
2）mousedown事件里注册mousemove事件，mousemove事件里记录移动后的位置
3）mousemove里处理位置，改变选中区域div的位置，结果图片里图片位置跟着改变（background-position）
4）mouseup事件里解除mousemove事件的绑定
2.2 选中区域的大小改变
1）选中区域右下角通过CSS加上一个三角形区域
2）三角形区域注册mousedown事件 记录鼠标原始位置
3）mousedown事件里注册mousemove事件，mousemove事件里记录移动后的位置
4）mousemove事件里处理移动的距离来改变选中区域的大小，结果div里图片缩放及位置修改（这步很烦，1个像素的差距都会导致整个功能变得奇葩）
5）mouseup事件里解除mousemove事件的绑定（省的移除图片区域后还有move事件）
3.代码如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.select {
width: 150px;
height: 150px;
position: absolute;
border: 1px dashed black;
left
最低0.47元/天 解锁文章
5240
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
