学会如何获取鼠标的坐标位置以及监听鼠标的按下、拖动、松开等动作事件，从而实现拖动鼠标来改变图片大小。
还可以学习css中的clip属性。
一、CSS实现图片不透明及裁剪效果。
图片剪切三层结构
1、第一层opacity,给图层设置透明度
2、第二层clip，clip属性：对图片进行裁剪，实现图像的一部分显示，其他部分进行隐藏
3、第三层选取框absolute（与第二层重叠的），包括八个触点的效果
html代码：
<div> <img src="https://www.jb51.net/img/1.jpg" /> <img src="https://www.jb51.net/img/1.jpg" /> <div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div>
css代码：
body{ background: #333; } #box{ width: 500px; height: 380px; position: absolute; top: 100px; left: 200px; } #img1,#img2{ position: absolute; top: 0; left: 0; } #img1{ opacity: 0.3; } #img2{ clip: rect(0,200px,200px,0); } #main{ position: absolute;/*第三层需用绝对定位浮在上面*/ width: 200px; height: 200px; border: 1px solid #fff; } .Divmin{ position: absolute; width: 8px; height: 8px; background: #fff; } .up-left{margin-top: -4px;margin-left: -4px;cursor: nw-resize;} .up{ left: 50%;/*父元素盒子main宽度的一半，注意要有绝对定位*/ margin-left:-4px; top: -4px; cursor: n-resize; } .up-right{top: -4px;right: -4px;cursor: ne-resize;} .right{top: 50%;margin-top: -4px;right: -4px;cursor: e-resize;} .right-down{right: -4px;bottom: -4px;cursor: se-resize;} .down{bottom: -4px;left: 50%;margin-left: -4px;cursor: s-resize;} .left-down{left: -4px;bottom: -4px;cursor: sw-resize;} .left{left: -4px;top: 50%;margin-top: -4px;cursor: w-resize;}
二、javascript获取选择框偏移量
选择框鼠标拖动位置详解：
offsetLeft:元素相对于其父元素左边界的距离；
clientX：鼠标位置的横坐标；
clientWidth：元素的宽度；
offsetXY:是该事件发生的盒子模型里的坐标，与滚动条无关。
clientXY：是整个浏览器可用部分里的坐标，与滚动条无关，即需要拖动滚动条才能看到的区域不考虑。
pageXY：是整个网页里的坐标，与滚动条有关。
构造一个getPosition()函数，用于获取元素相对于屏幕左边及上边的距离
js代码如下：
//获取元素相对于屏幕左边及上边的距离，利用offsetLeft function getPosition(el){ var left = el.offsetLeft; var top = el.offsetTop; var parent = el.offsetParent; while(parent != null){ left += parent.offsetLeft; top += parent.offsetTop; parent = parent.offsetParent; } return {"left":left,"top":top}; }
三、javascript实现控制触点
监听鼠标的按下、拖动、松开的事件控制选取框的大小。
注意区别：
Element.clientWidth 属性表示元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有的话）、边框和外边距。
即clientWidth不包括边框，offsetWidth包括边框
1）点击右面的触点
js代码：
var mainDiv = $('main'); var rightDiv = $('right'); var isDraging = false; var contact = "";//表示被按下的触点 //鼠标按下时 rightDiv.onmousedown = function(){ isDraging = true; contact = "right"; } //鼠标松开时 window.onmouseup = function(){ isDraging = false; } //鼠标移动时 window.onmousemove = function(e){ if(isDraging == true){ if(contact == "right"){ var e = e||window.event; var x = e.clientX;//鼠标位置的横坐标 var widthBefore = mainDiv.offsetWidth - 2;//选取框变化前的宽度 //var widthBefore = mainDiv.clientWidth; var addWidth = x - getPosition(mainDiv).left - widthBefore;//鼠标移动后选取框增加的宽度 mainDiv.style.width = widthBefore + addWidth + 'px';//选取框变化后的宽度 } } } //获取id的函数 function $(id){ return document.getElementById(id); }
2）点击上面触点
点击上面中间的触点移动时，选取框的高度和左上角的位置都需要变化。
增加的高度=选取框相对于屏幕上面的距离 - 鼠标位置的纵坐标
选取框左上角的top值要减去增加的高度，因为鼠标向上移动时高度增加，top值减小，下移时高度减小，top增大。
变化示意图：
js代码：