兩列網站調整大小

Question

如何創建兩列，其中一個div在翻轉時佔據整個屏幕？

Answer 1

這裏有一個如何這可以在jQuery的完成，一個真正簡單的例子，如果只給你一些方向：
jsfiddle

HTML

<div id="wrapper"> 
    <div class="col one"></div> 
    <div class="col two"></div> 
</div> 

JS

$(function() { 
    // Mouse over div 
    $(".col").mouseenter(function() { 
     // If it's the second div, we want to move it left while making it bigger 
     if($(this).hasClass("two")) { 
      // we use .stop to stop all current animations 
      // Also we add an active class to put it on top 
      $(this).stop().addClass("active").animate({"left": "0px", "width": "98%"}, 500); 
     } 
     // otherwise we dont care, just make it bigger 
     else { 
      // Also we add an active class to put it on top 
      $(this).stop().addClass("active").animate({"width":"98%"}, 500); 
     } 
    }); 
    // Mouse off div 
    $(".col").mouseleave(function() { 
     // If it's the second div, we want to move it back to 45% while making it smaller 
     if($(this).hasClass("two")) { 
      $(this).stop().animate({"left": "50%", "width":"45%"}, 500).removeClass("active"); 
     } 
     else { 
      $(this).stop().animate({"width":"45%"}, 500).removeClass("active"); 
     } 
    }); 
});