让你的网页动起来:Javascript+CSS拖曳盒子指南
更新时间：2024年03月19日 08:37:45 作者：远近高低各不同
想让你的网页动起来吗?这份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拖曳盒子内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
HTML中的数据绑定...2006-09-09
容器高度100%的绝对定位布局...2006-07-07
相对路径与绝对路径的区别...2006-09-09
HTML5中很重要的技能之一就是：HTML5本地存储，今天就来说说这个技术，以及和其它存储方案的比较。2013-10-10
解决URL中含有-与号-不符合标准问题...2006-09-09
CSS中div、span和center元素...2006-09-09
本文从各方面详细讲解了如何利用CSS的特性，从而实现各种有趣的3D动画效果，需要学习的小伙伴一起来看看吧，可以参考一下本篇文章2021-08-08
CSS实现光滑圆角效果...2006-09-09
最基本的HTML标签:链接、FRAMES、span、div还有样式表css，这些都要学会才可以手写HMTL代码。2013-10-10
stylelint是一个强大的现代CSS检测器,可以让开发者在样式表中遵循一致的约定和避免错误。本文将详细介绍CSS代码检查工具stylelint2020-02-02
最新评论