如何使用javascript交换部分

Question

我是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>

Answer 1

这是因为运行完第一个功能后，CON节位于TOP节的后面，这就是为什么可以看到它，但是您无法在该[con]节上启动鼠标悬停功能的原因。

您已经设置了z-index来实现。

看看这个 http://jsbin.com/izusar/1/

Answer 2

这是您要做什么？

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";
}

请注意我如何预设样式，以便可以交换它们：

#top
{
    position: fixed;
    top: 0;
}

#con
{
    position: fixed;
    bottom: 0;
}

Answer 3

如果您只想交换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>

如何使用javascript交换部分

问题描述

3 个解决方案

解决方案1
0 已采纳 2013-05-18 20:50:13

解决方案2
0 2013-05-18 20:52:47

解决方案3
0 2013-05-18 21:00:37

如何使用javascript交换部分

问题描述

3 个解决方案

解决方案1 0 已采纳 2013-05-18 20:50:13

解决方案2 0 2013-05-18 20:52:47

解决方案3 0 2013-05-18 21:00:37

解决方案1
0 已采纳 2013-05-18 20:50:13

解决方案2
0 2013-05-18 20:52:47

解决方案3
0 2013-05-18 21:00:37