让我为大家带来一个小案例吧！
让你的网页动起来:Javascript+CSS拖曳盒子指南
时间：2024-08-02 21:48:54|栏目：CSS/HTML|点击： 次
想让你的网页动起来吗?这份Javascript+CSS拖曳盒子指南将带你进入网页交互设计的奇妙世界,跟着我们的步骤,你很快就能创建出令人眼前一亮的动态网页效果,准备好开启一段有趣的编程探索之旅吧!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 100px;
background-color: black;
margin-bottom: 10px;
position: relative;
left: 0;
top: 0;
}
.box2 {
width: 100px;
height: 100px;
background-color: pink;
margin-bottom: 10px;
margin-left: 200px;
}
.box3 {
width: 100px;
height: 100px;
background-color: orange;
margin-top: 120px;
margin-left: 200px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
<script>
//获取要移动的盒子
var div = document.querySelector(".box1")
//获取其他2个盒子
var div1=document.querySelector(".box2")
var div2=document.querySelector(".box3")
div.onmousedown = function(e){
//获取盒子距离页面多少
var divX =div.offsetLeft
var divY =div.offsetTop
//获取盒子点击的xy坐标
var downX =e.clientX
var downY =e.clientY
document.onmousemove=function(e){
console.log(e);
// if(div.offsetLeft<1){
// alert("超出")
// }
//获取盒子点击的地方距离document点击的坐标的差
var moveX =e.clientX - downX
var moveY =e.clientY - downY
//获取移动鼠标想放哪放哪
// div.style.left =divX+moveX+"px"
// div.style.top =divY+moveY+"px"
//这个的中心点在中间
div.style.left =e.clientX - div.offsetWidth/2+"px"
div.style.top =e.clientY - div.offsetHeight/2+"px"
//拿他们的宽高去判断坐标
if(e.clientX<div1.offsetWidth+div.offsetWidth/2+200&&e.clientX>div1.offsetWidth+div.offsetWidth/2&&e.clientY>div1.offsetTop/2&&e.clientY<div1.offsetTop*2+40){
console.log(div1.offsetTop);
div1.style.backgroundColor="green"
}else{
div1.style.backgroundColor="pink"
}
//拿他们的距离去判断
if(e.clientX<div2.offsetWidth+div.offsetWidth/2+200&&e.clientX>div1.offsetWidth+div.offsetWidth/2&&e.clientY>div2.offsetTop-div.offsetHeight/2&&e.clientY<div2.offsetTop+div.offsetHeight+div.offsetHeight/2){
div2.style.backgroundColor="blue"
}else {
div2.style.backgroundColor="orange"
}
}
}
//如果按起就不动
div.onmouseup = function(){
document.onmousemove = null
}
</script>
</html>效果图：
您可能感兴趣的文章
