js 图片拉伸缩放，DIV拉伸

最新推荐文章于 2024-06-27 16:14:54 发布

默默地写代码

最新推荐文章于 2024-06-27 16:14:54 发布

阅读量3.2k

点赞数 1

分类专栏： JavaScript 文章标签： js图片拉伸放大缩小 js缩放 js拉伸 js div拉伸

本文链接：https://blog.csdn.net/qq_38334525/article/details/76095313

版权

JavaScript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.kx_border_img_stretch {
				position: absolute;
				top: 0;
				display: none;
			}
			 
	 
	        /*四角*/
	        
	        .kx_border_img_stretch .br {
	            width: 20px;
	            height: 20px;
	            position: absolute;
	            background: #CCC;
	            z-index: 2;
	            cursor: nwse-resize
	        }

	        .kx_border_img_stretch .br {
	            right: -5px;
	            bottom: -5px;
	        }

		</style>
	</head>
	<body>
		<div>
			 
			<div class="editor" contenteditable="true" style="min-height: 800px; position: relative;">
				<div>
					 
					<img src="https://www.baidu.com/img/bd_logo1.png" alt="" class="img_in"/>
					 
				</div>
				<div class="kx_border_img_stretch " style="border: 1px solid #0000CC;">
					
				    <span class="br"></span>
				     
				</div>
			</div>
		</div>
		<script src="js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript">
			
			$(".editor").click(function(e){
			     
			    if($(e.target)[0].tagName != "IMG") {
			    	$(".kx_border_img_stretch").css({"width": 0,"height": 0,"top": "100%","left": "0px","display":"none"});
			    }
			   
			});
				var oDiv = document.getElementsByClassName('kx_border_img_stretch')[0];
	            var aSpan = oDiv.getElementsByTagName('span');
	            for (var i = 0; i < aSpan.length; i++) {
	                dragFn(aSpan[i]);
	            }
	            
	            var this_img;
				$("img").on("click", function() {
					var X = $(this).position().top;
					var Y = $(this).position().left;
					console.log(X)
					var wid = $(this)[0].width;
					var hei = $(this)[0].height;
					$(".kx_border_img_stretch").css({"width": wid,"height": hei,"top":X+"px","left":Y+"px","display":"inline-block"});
					this_img = $(this);
				})
	            function dragFn(obj) {
	            	
	                obj.onmousedown = function (ev) {
	                    var oEv = ev || event;
	 
	                    var oldWidth = oDiv.offsetWidth;
	                    var oldHeight = oDiv.offsetHeight;
	                    var oldX = oEv.clientX;
	                    var oldY = oEv.clientY;
	                    var oldLeft = oDiv.offsetLeft;
	                    var oldTop = oDiv.offsetTop;
	 
	                    document.onmousemove = function (ev) {
	                        var oEv = ev || event;
	 
	                        if (obj.className == 'br') {
	                            oDiv.style.width = oldWidth + (oEv.clientX - oldX) + 'px';
	                            oDiv.style.height = oldHeight + (oEv.clientY - oldY)+'px';
	                            oDiv.style.right = oldLeft - (oEv.clientX - oldX) + 'px';
	                            oDiv.style.bottom = oldTop + (oEv.clientY + oldY) + 'px';
	                        } 
	                        console.log(this_img);
	                    	var new_width = oDiv.style.width;
	                    	var new_height = oDiv.style.height;

	                    	this_img.css({"width":new_width,"height":new_height})
	                    };
	 
	                    document.onmouseup = function () {
	                        document.onmousemove = null;
	                    };
	                    return false;
	                };
	            }
		</script>
		 
	</body>
</html>