图片放大器

最新推荐文章于 2020-06-02 10:44:36 发布

坚持小P

最新推荐文章于 2020-06-02 10:44:36 发布

阅读量1k

点赞数 1

分类专栏： javascript 文章标签： jquery 头像图片区域选择 javascript

本文链接：https://blog.csdn.net/Goblin_J/article/details/50909471

版权

这篇博客介绍了如何使用JavaScript和jQuery实现一个头像选择区域的功能。作者详细解析了实现过程，包括监听mousedown、mouseup和mousemove事件来移动和调整选区大小，以及在处理图片缩放时遇到的问题。文章中提到的难点在于缩放的精确计算和事件绑定的范围，并分享了解决方案。最后，作者展示了半成品效果，并表示对技术的深入理解仍有待提高。

摘要由CSDN通过智能技术生成

再修改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