1

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

3 回答 3

0

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

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

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

于 2013-05-18T20:50:13.547 回答
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;
}
于 2013-05-18T20:52:47.847 回答
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>
于 2013-05-18T21:00:37.363 回答