js div控制器鼠标拖动控制点实现旋转、缩放、移动

有没有类似的插件，或者实例？... 有没有类似的插件，或者实例？展开

 我来答

1个回答

#热议# 海关有哪些禁运商品？查到后怎么办？

yugi111
2017-11-14 · TA获得超过8.1万个赞

知道大有可为答主

回答量：5.1万

采纳率：70%

帮助的人：1.3亿

我也去答题访问个人页

关注

展开全部

<!DOCTYPE HTML>
<html>

<head>
	<title>Page Title</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<style>
		.wrap{
				margin: 0 auto;
				width:1000px;
				height:1000px;
				border:1px solid gray;
			}
			.wrap>div{
				float:left;
				}
				.wrap>#p{
					width:80%;
					height:1000px;	
					position:relative;
					overflow:auto;
					border:1px solid gray;
				}
				div.d{
					width:19%;
					height:1000px;
					
				}
	#dd{
	width:100px;
	height:100px;
	left:300px;
	top:300px;
	position:absolute;
	background-color:#c81623;
	}	
	</style>
	<粗哗瞎script>
		onload=function(){
				var div=document.getElementById("dd");
				var sf=document.getElementById("sf");
				var ydx=document.getElementById("ydx");
				var ydy=document.getElementById("ydy");
				var p=document.getElementById("p");
				sf.value=parseFloat(getStyle(div,"width"))*100/500;
				ydx.value=parseFloat(getStyle(div,"left"))*100/parseFloat(getStyle(p,"岩空width"));
				ydy.value=parseFloat(getStyle(div,"top"))*100/parseFloat(getStyle(p,"height"));
		}
		var rotate=function(obj){
			var div=document.getElementById("dd");
			div.style['transform'] = div.style['-webkit-transform'] = 'rotate(' + obj.value*360*0.01 + 'deg)';	
		} 
		var scale=function(obj,w){
			var div=document.getElementById("dd");
			var h=parseFloat(getStyle(div,"height"));
			var ww=parseFloat(getStyle(div,"width"));
			div.style.height=div.style.width=w*0.01*obj.value +"px";
			var lef=parseFloat(getStyle(div,"left"));
			var tp = parseFloat(getStyle(div,"top"));
			div.style.left=lef-(parseFloat(div.style.width)-ww)/2+"px";
			div.style.top=tp-(parseFloat(div.style.height)-h)/2+"px";
		}
		
		var movex=function(obj,w){
				var div=document.getElementById("dd");
				var p=document.getElementById("p");
				div.style.left=obj.value*0.01*(parseFloat(getStyle(p,"width"芦穗))-parseFloat(getStyle(div,"width")))+"px";
		}
		
		var movey=function(obj,w){
				var div=document.getElementById("dd");
				var p=document.getElementById("p");
				div.style.top=obj.value*0.01*(parseFloat(getStyle(p,"height"))-parseFloat(getStyle(div,"height")))+"px";
		}
		
		var getStyle=function(obj,attr){
					if(obj.currentStyle){
						return obj.currentStyle[attr];	
					}else if(window.getComputedStyle){
						var styleVal = window.getComputedStyle(obj, null)[attr] 
						? window.getComputedStyle(obj, null)[attr] :
          			window.getComputedStyle(obj, null).getPropertyValue(attr);
          			return styleVal;
					}
				}
	</script>
</head>

<body>
 <div class="wrap">
 	<div id="p">
 		<div id="dd"></div>	
 	</div>
 	<div class="d">
 		旋转:
 	 	<input type="range" id="xz" max=100 min=0 value=0 oninput="rotate(this)"  />	
 	 	缩放:
 	 	<input type="range" id="sf" max=100 min=0 value=0 oninput="scale(this,500)" />	
 	 	移动X:
 	 	<input type="range" id="ydx" max=100 min=0 value=0 oninput="movex(this)" />	
 	 	移动Y:
 	 	<input type="range" id="ydy" max=100 min=0 value=0 oninput="movey(this)"/>	
 	</div>	
 </div>
</body>

</html>

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

js div控制器 鼠标拖动控制点 实现旋转、缩放、移动

其他类似问题

为你推荐：

js div控制器鼠标拖动控制点实现旋转、缩放、移动