您正在使用 IPV4 [44.221.73.157] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]保护绿色环境,构建和谐社会       悟空收录网      

【腾讯云】2核2G4M云服务器新老同享99元/年,续费同价      
[公益] 地球是我家,绿化靠大家      
2024年 七夕节 056
2025年 高 考 357
2025年 元 旦 200
2025年 春 节 228
 
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
让你的网页动起来:Javascript+CSS拖曳盒子指南
内容摘要: !DOCTYPEhtmlhtmlheadmetacharset='utf-8'title/titlestyle*{margin:0;padding:0;}.box1{width:100px;height:100px;background-color:black;margin-bottom:10px;position:relative;left:0;top:0......
<!DOCTYPEhtml>

<html>

<head>

<metacharset="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>

<divclass="box1"></div>

<divclass="box2"></div>

<divclass="box3"></div>

</body>

<script>

//获取要移动的盒子

vardiv=document.querySelector(".box1")

//获取其他2个盒子

vardiv1=document.querySelector(".box2")

vardiv2=document.querySelector(".box3")

div.onmousedown=function(e){

//获取盒子距离页面多少

vardivX=div.offsetLeft

vardivY=div.offsetTop

//获取盒子点击的xy坐标

vardownX=e.clientX

vardownY=e.clientY

document.onmousemove=function(e){

console.log(e);

//if(div.offsetLeft<1){

//alert("超出")

//}

//获取盒子点击的地方距离document点击的坐标的差

varmoveX=e.clientX-downX

varmoveY=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>

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:JS实现自定义状态栏动画文字效果

 

下一篇:JS实现鼠标点击箭头旋转180度功能

发布日期:2024/4/4
手机扫二维码直达本页
发布时间:12:39:00
点  击:13
录  入:壹家怡园
相关文章
Baidu
YiJiaCMS 7.5.1 build240527(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....