<!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>
<!--draggable 是否禁止拖曳-->
<img ID="dv" src="http://temp.im/250x250/4CD964/fff" draggable="false" />
<br>
<!--<div ID="open"></div>-->
<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)所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)