[英]how to swap sections with javascript
I'm beginner with HTML5 and Javascript and I'd like to create a basic function that swap the section's positions with a event. 我是HTML5和Javascript的初学者,我想创建一个基本功能,该功能可以将部分位置与事件交换。
The function 1 is working, swapping the section "con" to top, but the function 2 doesn't work. 函数1正在工作,将“ con”部分换到顶部,但是函数2无法工作。
Please, someone can help me? 拜托,有人可以帮我吗?
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>
it is because after running ur first function, Section CON goes behind the TOP section thats why can see it but u cant fire mouseover function on that [con] section.. 这是因为运行完第一个功能后,CON节位于TOP节的后面,这就是为什么可以看到它,但是您无法在该[con]节上启动鼠标悬停功能的原因。
u have set z-index to achieve that. 您已经设置了z-index来实现。
check this out http://jsbin.com/izusar/1/ 看看这个 http://jsbin.com/izusar/1/
Is this what you are trying to do? 这是您要做什么?
http://jsfiddle.net/vQcrh/ http://jsfiddle.net/vQcrh/
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";
}
Notice how I preset the styles so I could swap them: 请注意我如何预设样式,以便可以交换它们:
#top
{
position: fixed;
top: 0;
}
#con
{
position: fixed;
bottom: 0;
}
If you are trying to just swap the section elements then this may helpfull. 如果您只想交换section元素,那么这可能会有所帮助。
<!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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.