Html
    Css
    Js

    
                        
body {
	padding:0;
	margin:0;
}
.boxs {
	position:absolute;
	left:100px;
	top:100px;
	min-height:100px;
	min-width:100px;
	overflow:hidden;
}
/*四边*/
.boxs .l,.boxs .b,.boxs .t,.boxs .r {
	position:absolute;
	z-index:1;
	background:#666;
}
.boxs .l,.boxs .r {
	width:10px;
	height:100%;
	cursor:col-resize;
}
.boxs .t,.boxs .b {
	height:10px;
	width:100%;
	cursor:row-resize;
}
.boxs .l {
	left:0;
}
.boxs .r {
	right:0;
}
.boxs .t {
	top:0;
}
.boxs .b {
	bottom:0;
}
/*四角*/
.boxs .tl,.boxs .tr,.boxs .bl,.boxs .br {
	position:absolute;
	background-color:#ccc;
	z-index:2;
	width:10px;
	height:10px;
	cursor:nw-resize;
}
.boxs .tr {
	right:0;
	cursor:ne-resize
}
.boxs .bl {
	bottom:0;
	cursor:ne-resize
}
.boxs .br {
	bottom:0;
	right:0;
}
.boxs img {
	width:100%;
	height:100%;
	vertical-align:top;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

js实现拖拽控制图片大小的伸缩

更新时间:2021-08-15 22:37:15

0