我是HTML5和Javascript的初学者,我想创建一个基本功能,将部分的位置与事件交换。
功能1正在工作,交换部分" con"顶部,但功能2不起作用。
拜托,有人可以帮帮我吗?
function swap1()
{
document.getElementById("top").style.position = "absolute";
document.getElementById("con").style.top = "50px";
}
function swap2()
{
document.getElementById("con").style.position = "fixed";
document.getElementById("top").style.bottom = "300px";
}
<section id="top" onmousedown="swap1()">
<video width="500" height="500" controls>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type=video/mp4>
</video>
</section>
<section id="con" onmouseover="swap2()">
<hr>
<p>Text.</p>
</section>
答案 0 :(得分:0)
这是因为在运行你的第一个函数之后,Section CON落后于TOP部分,为什么可以看到它但是你不能在[con]部分激活鼠标悬停功能..
你已经设置了z-index来实现这一目标。
答案 1 :(得分:0)
这是你想要做的吗?
function swap1()
{
var top=document.getElementById("top");
var con=document.getElementById("con");
con.style.bottom=top.style.top="auto";
con.style.top=top.style.bottom="0";
}
function swap2()
{
var top=document.getElementById("top");
var con=document.getElementById("con");
con.style.top=top.style.bottom="auto";
con.style.bottom=top.style.top="0";
}
注意我如何预设样式,以便我可以交换它们:
#top
{
position: fixed;
top: 0;
}
#con
{
position: fixed;
bottom: 0;
}
答案 2 :(得分:0)
如果您只想交换部分元素,那么这可能会有所帮助。
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
function swap(obj) {
//var firstChildID = jQuery('#container section:first-child').attr('id');
jQuery(obj).prependTo('#container');
//if (firstChildID == jQuery(obj).attr('id'))
// jQuery(obj).appendTo('#container');
}
</script>
</head>
<body>
<div id="container">
<section id="top" onclick="javascript:swap(this);">
<video width="500" height="500" controls>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4" />
</video>
</section>
<section id="con" onclick="javascript:swap(this);">
<hr/>
<p>Text.</p>
</section>
</div>
</body>
</html>