JS弹出可以拖动的DIV

最新推荐文章于 2024-05-14 13:35:49 发布

duzhenxun

最新推荐文章于 2024-05-14 13:35:49 发布

阅读量339

点赞数

本文链接：https://blog.csdn.net/duzhenxun/article/details/89922599

版权

JAVASCRIPT相关专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<html>
<style>
#d1{position:absolute;left:100px;top:100px;display:none;width:300px;height:330px;}
#d2{background:red;width:300px;height:30px;}
#d3{border:1px solid red;width:298px;height:200px;background:#ffffff}
</style>
<body>
<div id="d1">
<div id="d2"></div>
<div id="d3">拖到的DIV演示，主要复习一下JS的事件</div>
</div>
<a href="javascript:void(0)" οnclick="show()">点击注册</a>

<script>
var d1 = document.getElementById("d1");
var d2 = document.getElementById("d2");

//显示div将放入WEB中间位置
function show(){
//alert(window.screen.width);
d1.style.display="block";
d1.style.left=screen.width/2-150.;
d1.style.top=screen.height/2-330;
}

//设down为真时可以移动DIV坐标
var down = false;
document.οnmοusemοve=function(e){
//兼容火狐与IE
var ev = e || window.event;
var cx = ev.clientX;
var cy = ev.clientY;
if(down){
d1.style.top = cy-15;
d1.style.left = cx-150;
}
}

//如果按下鼠标时DOWN为真
d2.onmousedown = function(){
down = true;
}

//如果松开鼠标,DOWN为假
document.onmouseup = function(){
down = false;
}
</script>
</body>
</html>

duzhenxun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS弹出可以拖动的DIV

<html><style>#d1{position:absolute;left:100px;top:100px;display:none;width:300px;height:330px;}#d2{background:red;width:300px;height:30px;}#d3{border:1px solid red;width:298px;height:2...
复制链接

扫一扫