如何用javascript交换部分

时间:2013-05-18 20:23:57

标签: javascript html5

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

3 个答案:

答案 0 :(得分:0)

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

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

check this out http://jsbin.com/izusar/1/

答案 1 :(得分:0)

这是你想要做的吗?

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

答案 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>