html中自动移动图片,html的图片移动（js）

*{padding: 0;margin: 0}

#open{

width: 300px;

height: 300px;

background-color: brown;

position: relative;

border-radius:50%;

}

#dv {

width:100px;

height:100px;

/*background-color:blue;*/

border-radius:50%;

position:relative;

}

//图像移动方法

function ImgMove(ImgId){

//获取元素

var dv = document.getElementById(ImgId);

var x = 0;

var y = 0;

var l = 0;

var t = 0;

var isDown = false;

//鼠标按下事件

dv.onmousedown = function(e) {

//获取x坐标和y坐标

x = e.clientX;

y = e.clientY;

//获取左部和顶部的偏移量

l = dv.offsetLeft;

t = dv.offsetTop;

//开关打开

isDown = true;

//设置样式

dv.style.cursor = 'move';

}

//鼠标移动

window.onmousemove = function(e) {

if (isDown == false) {

return;

}

//获取x和y

var nx = e.clientX;

var ny = e.clientY;

//计算移动后的左偏移量和顶部的偏移量

var nl = nx - (x - l);

var nt = ny - (y - t);

dv.style.left = nl + 'px';

dv.style.top = nt + 'px';

document.getElementById("img-left").innerHTML=dv.style.left.toString();

document.getElementById("img-top").innerHTML=dv.style.top.toString();

}

//鼠标抬起事件

dv.onmouseup = function() {

//开关关闭

isDown = false;

dv.style.cursor = 'default';

}

}

ImgMove('dv');

function ImgInto(num1Id){

var num1 = document.getElementById(num1Id);

return num1.style.top.toString();

}

内容来源于网络如有侵权请私信删除