如何使用javascript替換部分

我是初學HTML5和Javascript的用戶，我想創建一個基本功能，使用事件交換部分的位置。如何使用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>

來源

2013-05-18 h1ghland3r

這是因爲運行烏爾第一功能之後，第CON進入頂部區域這就是爲什麼後面可以看到但你對[CON]部分火傾斜鼠標懸停功能..

你已經設置了z-index來實現這一點。

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

來源

2013-05-18 20:50:13 mastermind

得到它，謝謝！ – h1ghland3r

難道這就是你想幹什麼？

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-18 20:52:47 teh1

如果你想只是交換的部分元素，那麼這可能有幫助。

<!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-18 21:00:37 LX7

謝謝！現在工作 – h1ghland3r

如何使用javascript替換部分

回答

相關問題