本文介绍了如何使用JavaScript实现图片剪切功能。通过三层结构的CSS布局，结合clip属性来裁剪图片。同时，详细讲解了选取框的制作，包括CSS样式设定、鼠标样式变化以及获取元素位置的JavaScript函数。文章还涵盖了鼠标触点移动的事件监听，动态调整选取框大小的实现方式，以及如何识别拖动的是哪个触点。
css
基本结构：主要通过三层叠加实现：最底层的固定不动的半透明图片；中间层的部分不透明的清晰图片；最上层的选取框。
css的clip属性：
img{
clip:rect(0px,60px,200px,0px) //剪辑图片的矩形区域，各点坐标作为参数(相对于整个图片的左上角为起始位置)
}
制作选取框的点(minDiv)：
.minDiv{
position:absolute;
width:8px;
height:8px;
background:#fff;
left:50%; //距离左侧边框50%
margin-left:-4px; //减去minDiv<
最低0.47元/天 解锁文章
扫一扫
2329
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
