怎么用JS实现当一个div(div可拖动)覆盖另一个div时消失
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么用JS实现当一个div(div可拖动)覆盖另一个div时消失相关的知识，希望对你有一定的参考价值。
如题，就是比如我把这个可以拖动的div拖到某个div区域时，就会消失
div1是可以****随意拖动放置****的div，div2是不能拖动的div
然后当我把div1拖到div2上方时，div1消失，div2不消失
注意打***的关键词
<meta charset="utf-8">
<title>拖拽测试</title>
<style>
div
float: left;
width: 100px;
height: 35px;
margin: 15px;
margin-right: 100px;
padding: 10px;
border: 1px solid #aaaaaa;
</style>
</head>
<body>
<p>在两个矩形框中DIV元素:</p>
<div draggable="true" id="div1">可拖动div!</div>
<div id="div2" ondragover="dropOver(event)">
不可拖动div
</div>
<script>
function dropOver(event)
console.log("dropOver");
document.getElementById("div2").style.display = "none";
</script>
</body>
</html>
采用拖拽事件然后控制显示才能达到你要的效果吧 参考技术B 这个跟html元素的定位方式有关.
div默认的是 后面一个div根据前一个div来定位. 也就是相对定位;
而你这里需要的,实际上就是两个div根据他们的父容器来定位, 也就是绝对定位. 并且, 后面一个div覆盖到前一个上面.
所以, 你应该使用的是
<style>.parentDivposition:relative;.div1position:absolute;z-index:1;.div2position:absolute;z-index:2;</style><div class="parentDiv"><div class="div1">我在下面</div><div class="div2">我在上面</div></div>
怎么用js实现点击页面上的div慢慢放大，再次点击慢慢缩小。在同一个div
怎么用js实现点击页面上的div慢慢放大，再次点击慢慢缩小。在同一个div上点击。。求指点。
用jq 可以轻松实现 下面的代码是 移位 +放大, 再次点击时的代码自己加
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function()
$("div").click(function()
$("div").animate(
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
);
);
);
</script> 参考技术A 我觉得你需要用js控制div的offsetwidth ，offsetheight ，和margin-top ，margin-left
这四个值应该可以实现
以上是关于怎么用JS实现当一个div(div可拖动)覆盖另一个div时消失的主要内容，如果未能解决你的问题，请参考以下文章
怎么用js实现，点击“继续”，隐藏当前div，显示下一个div，点击“返回”隐藏当前div，显示上一个div