代码一：实现鼠标能够拖动div
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><div id="rec" style="position:absolute;left: 100px;top: 100px; width: 50px;height: 50px;background: red;"></div></body><script type="text/javascript">//获取div元素var rec = document.getElementById("rec")var down = false;var dx = 0;var dy = 0;var sx = 0;var sy = 0;document.onmousemove = function(e){if (down) {var ev = e || event;console.log(ev.clientY)rec.style.top = ev.clientY - (dy - sy) + 'px';rec.style.left = ev.clientX - (dx - sx) + 'px';}}rec.onmousedown = function(){dx = event.clientX;dy = event.clientY;sx = parseInt(rec.style.left);sy = parseInt(rec.style.top);if (!down) {down = true;}}document.onmouseup = function(){if (down) {down = false;}}</script></html>
代码二:实现跟随鼠标的移动或者点击而移动
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>移动</title><script type="text/javascript">function move(keynum) {//获取屏幕宽度var w=screen.availWidth;//获取屏幕高度var h=screen.availHeightvar d = document.getElementById("dv");//创建随机数，也就是我们的移动速度var speed=Math.floor(Math.random()*100);switch (keynum) {case 65://a--向左移动if(d.offsetLeft<5){d.style.left=w/2+"px";}else{d.style.left = d.offsetLeft - speed + "px"; }break;case 68://d---右移动if(d.offsetLeft>screen.w-speed){d.style.left=w/2+"px";}else{d.style.left = d.offsetLeft + speed + "px";}break;case 87://w---向上移动if(d.offsetTop<speed){d.style.top=h/2+"px";}else{d.style.top = d.offsetTop - speed + "px";}break;case 83://s---向下移动if(d.offsetTop>h-speed){d.style.top=h/2+"px";}else{d.style.top = d.offsetTop + speed + "px";}break;}}function keyChange(e){var keynum;if (window.event) // IE{keynum = e.keyCode} else if (e.which) // Netscape/Firefox/Opera{keynum = e.which}move(keynum);}//随着鼠标一起动document.οnmοusemοve=function showxy(e) {if(!e){e = window.event; }var d = document.getElementById("dv");d.style.left=e.clientX+"px";d.style.top=e.clientY+"px";//alert(e.clientX+","+e.clientY);} //点击鼠标移动/* document.οnmοusedοwn=function showxy(e) {var d = document.getElementById("dv");d.style.left=e.clientX+"px";d.style.top=e.clientY+"px";}*/</script></head><body οnkeydοwn="keyChange(event)"><div style="position: absolute; left: 100px; top: 100px;" id="dv"><img src="ball.png" width="50px" height="50px" /></div></body></html>
js div控制器 鼠标拖动控制点 实现旋转、缩放、移动
<!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>οnlοad=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 οninput="rotate(this)" /> 缩放:<input type="range" id="sf" max=100 min=0 value=0 οninput="scale(this,500)" />移动X:<input type="range" id="ydx" max=100 min=0 value=0 οninput="movex(this)" /> 移动Y:<input type="range" id="ydy" max=100 min=0 value=0 οninput="movey(this)"/> </div> </div></body></html>
