<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
width: 200px;
height: 107px;
position: absolute;
top: 0;
left: 0;
/* border: 1px solid #000; */
cursor: move;
}
</style>
</head>
<body>
<img src="./images/timg.jpg" id="img" alt="">
<script>
//鼠标在图片上按下后,可以拖拽图片在当前页面进行移动 鼠标松开后,停止移动
var img = document.getElementById('img');
//获取当前视口宽度的浏览器兼容性写法
// var aw = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
// var ah = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var aw = document.documentElement.clientWidth - img.clientWidth;
var ah = document.documentElement.clientHeight - img.clientHeight;
console.log(img.clientHeight)
img.onmousedown = function(e){
// console.log(e);
//阻止图片的默认行为
e.preventDefault();
//鼠标点在页面中的位置
var mx = e.clientX;
var my = e.clientY;
// console.log(mx);
//鼠标按下后,获取图片初始的位置
var initX = parseInt(window.getComputedStyle(img).left);
var initY = parseInt(window.getComputedStyle(img).top);
// console.log(initX)
//鼠标在当前页面中进行移动
document.onmousemove = function(e){
// console.log(e);
//鼠标点在页面中的位置
// var mx2 = e.clientX;
// var my2 = e.clientY;
// console.log(mx2);
//获取移动距离
// var moveX = mx2 - mx;
// var moveY = my2 - my;
// console.log(moveX);
var moveX = e.clientX - mx;
var moveY = e.clientY - my;
//图片移动后的位置
var ml = initX + moveX;
var mt = initY + moveY;
//边界判断
if(ml < 0){
ml = 0;
}else if(ml >= aw){
ml = aw;
}
if(mt < 0){
mt = 0;
}else if(mt >= ah){
mt = ah;
}
//设置新的位置到图片上
img.style.left = ml + "px";
img.style.top = mt + "px";
}
}
document.onmouseup = function(){
document.onmousemove = null;
}
//窗口改变
window.onresize = function(){
aw = document.documentElement.clientWidth - img.clientWidth;
ah = document.documentElement.clientHeight - img.clientHeight;
}
</script>
</body>
</html>
js 在窗口拖动一个元素的实现
最新推荐文章于 2024-10-07 09:24:46 发布