代码一：实现鼠标能够拖动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.availHeight
var 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.onmousemove=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.onmousedown=function showxy(e) {
var d = document.getElementById("dv");
d.style.left=e.clientX+"px";
d.style.top=e.clientY+"px";
}*/
</script>
</head>
<body onkeydown="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>
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>