两列网站调整大小

Two Column Website Resizing

本文关键字：调整 网站 两列      更新时间：2023-09-26

如何创建一个双列，其中一个div在滚动时占据整个屏幕?

这里有一个非常快速的例子，说明如何在jquery中实现这一点，如果只是给你一些指导:
jsfiddle 

<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");
        }
    });
});
相关文章：