html的图片移动（js）_html-js-css

概述<!DOCTYPE html> <html> <style> *{padding: 0;margin: 0} #open{ width: 300px; height: 300px; background-color: brown; position: relative; border-radius:50%; } #dv { width:100px; height:100px; /*backgrou

<!DOCTYPE HTML>
<HTML>
<style>
*{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;
}
</style>
<body>

<img ID="dv" src="http://temp.im/250x250/4CD964/fff" draggable="false" />
<br>


<p ID="img-left"></p>
<p ID="img-top"></p>
<script>
//图像移动方法
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‘);

</script><script> function imgInto(num1ID){ var num1 = document.getElementByID(num1ID); return num1.style.top.toString();} </script></body></HTML>

总结

以上是内存溢出为你收集整理的html的图片移动（js）全部内容，希望文章能够帮你解决html的图片移动（js）所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1031888.html