让你的网页动起来:Javascript+CSS拖曳盒子指南
作者：远近高低各不同
想让你的网页动起来吗?这份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>效果图：
到此这篇关于让你的网页动起来:Javascript+CSS拖曳盒子指南的文章就介绍到这了,更多相关 Javascript+CSS拖曳盒子内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！