<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-3.0.0.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.img-1,
.img-2 {
border: 0px;
display: block;
position: absolute;
z-index: 1;
}
.img-1 {
opacity: 0.3;
}
.img-2 {
clip: rect(0px, 200px, 200px, 0px);
}
body {
background: #333;
}
#main {
position: relative;
top: 100px;
left: 200px;
width: 460px;
height: 360px;
}
.move {
border: 1px solid #fff;
z-index: 2;
position: absolute;
width: 200px;
height: 200px;
cursor: move;
}
.minDiv {
width: 8px;
height: 8px;
background: #fff;
position: absolute;
}
.minDiv.left-up {
top: -4px;
left: -4px;
cursor: nw-resize;
}
.minDiv.left {
top: 50%;
left: -4px;
margin-top: -4px;
cursor: w-resize;
}
.minDiv.left-down {
bottom: -4px;
left: -4px;
cursor: sw-resize;
}
.minDiv.top {
left: 50%;
margin-left: -4px;
cursor: n-resize;
top: -4px;
}
.minDiv.right-up {
right: -4px;
cursor: ne-resize;
top: -4px;
}
.minDiv.right {
right: -4px;
cursor: e-resize;
top: 50%;
margin-top: -4px;
}
.minDiv.right-down {
right: -4px;
bottom: -4px;
cursor: se-resize;
}
.minDi
jQuery 实现图片剪切(裁剪)效果(慕课网:用JavaScript实现图片剪切(裁剪)效果)
最新推荐文章于 2024-08-02 05:15:54 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)