Question

我是HTML5和Javascript的初学者，我想创建一个基本功能，将部分的位置与事件交换。

功能1正在工作，交换部分＆＃34; con＆＃34;顶部，但功能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

这是因为在运行你的第一个函数之后，Section CON落后于TOP部分，为什么可以看到它但是你不能在[con]部分激活鼠标悬停功能..

你已经设置了z-index来实现这一目标。

check this out 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

如果您只想交换部分元素，那么这可能会有所帮助。

<!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 个答案: