用JavaScript实现图片剪切效果_技术问答

首页免费课用JavaScript实现图片剪切效果问答

用JavaScript实现图片剪切效果

全部评论问答未解决精华

Sunny_myj

clip属性值：auto|rect(top,right,bottom,left)
auto代表不裁切，rect中的上右下左四个方向填入的应是数值，表示裁切的位置。

1 1-1 JavaScript实现图片剪切效果课程简介

2016-10-08

Sunny_myj

clip属性值：auto|rect(top,right,bottom,left)

auto代表不裁切，rect中的上右下左四个方向填入的应是数值，表示裁切的位置。

0 1-1 JavaScript实现图片剪切效果课程简介

2016-10-08

微积分2016

cursor:nw-resize;

1 2-3 CSS实现图片控制触点效果

2016-09-24

全_无_修

今后想做的时候再做

0 3-12 编程挑战

2016-09-23

慕慕8663590

大家要注意不要将onmousemove 写成 onmouseover ，注意它们两之间的区别

1 3-3 JavaScript实现控制触点（上）

2016-09-20

慕慕8663590

Element.clientWidth 属性表示元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有的话）、边框和外边距。

0 3-3 JavaScript实现控制触点（上）

2016-09-20

慕慕8663590

opacity兼容ie 应该加上filte：alpha（opacity=70）;

0 2-1 CSS实现图片不透明及裁剪效果

2016-09-20

ClientX在处理右/左侧边框时的起始点到底在哪里？

最新回答 / 12只怕有心人

clientX的起点是可视区域左侧，终点就是假设选框被拉动后触点所在的位置.

1 回答 844 浏览

2016-09-19

鱼和熊掌我都有

margin-top和margin-left也可以写在minDiv里面作为公共样式

0 2-3 CSS实现图片控制触点效果

2016-09-17

qq_包包世界我专业_0

我自己写有一份跟老师的不一样的，截取图片后，可以下载的，要代码可以加我

0 3-10 JavaScript实现剪切区域预览

2016-09-12

特雷西9821

我也制作了一个，能够支持移动端，不过改变大小只有一个触点，另外七个触点自己的想法有点浮躁，我看看老师是如何简化的

0 1-1 JavaScript实现图片剪切效果课程简介

2016-09-09

四个角上的触点的移动有顺序吗

已采纳回答 / 雪莉酱

我的按老师写的是好的。。

1 回答 1192 浏览 3-7 JavaScript实现控制触点（下）

2016-09-08

慕粉q

还可以，老师讲的挺详细

0 1-1 JavaScript实现图片剪切效果课程简介

2016-09-08

Dosin

拖动不需要插件，自己写 js 也没问题。
mousedown 事件中记录：
startX = e.clientX; startY = e.clientY; startLeft = clipper.offsetLeft; startTop = clipper.offsetTop;
mousemove 事件中：
.style.left = startLeft + e.clientX - startX + 'px'; .style.top = startTop + e.clientY - startY + 'px';

0 3-10 JavaScript实现剪切区域预览

2016-08-31

Dosin

function getOffsetLeft(el) {
var left = 0;
while (el.parentNode !== null) {
left += el.offsetLeft;
el = el.parentNode
}
return left;
}

1 3-1 JavaScript获取选择框偏移量

2016-08-29

AndersonLee

记录下鼠标按下时的坐标downX 在用鼠标移动时的坐标减去downX==addwidth

1 3-1 JavaScript获取选择框偏移量

2016-08-18

首页上一页 3 4 5 6 7 8 9 下一页尾页

该课程已下架

课程须知: 在学习本课程之前，您应该已经熟悉js事件的绑定和css的绝对定位。

老师告诉你能学到什么？: 通过本课程，您将学习到如何通过组合鼠标的按下、拖动和松开事件来实现鼠标对元素的拖动和缩放，从而在js事件操作方面的学习有个更大的飞越。

微信扫码，参与3人拼团

热搜

最近搜索清空