Question

我想设计一个这样的网页......任何人都可以帮助我......如何做到这一点

演示在这里http://www.valentinagallo.us/site/#/home

任何帮助将不胜感激

Answer 1

我为您创建了特别的基本脚本。请参阅我的解决方案的想法。

首先，您必须使用固定位置创建DIV，并设置 z-index 以隐藏真实内容。现在，您可以使用两个幻灯片部分创建DIV：左和右以动态设置和放置内容。

请参阅演示：http://jsfiddle.net/luckyjquery/q2hLfo2q/

注意：这是向您展示我的想法的基本代码。我可以为你开发它。

HTML：

<button>Change slide</button>
<div class="content">
    <div class="left"></div>
    <div class="right"></div>
</div>

CSS：

.content {
    position: relative;
    height: 350px;
    width: 90%;
    overflow: hidden;
}
.content > div {
    position: absolute;
    height: 100%;
    width: 50%;
    top: 0px;
}
.content .left{
    left: 0px;
    background-color: #d93434;
} 
.content .right{
    right: 0px;
    background-color: #b3d934;
}

jQuery：

;(function ($) {
    //Functions
    var fns = { 
        /*Select basic elemments */
        button: $('button'),
        leftBox: $('.left'),
        rightBox: $('.right'),
        /* Initialize */
        init: function(){
            //Click the button
            fns.button.on('click', function(e){
                e.preventDefault();
                //Change slide
                fns.changeSlide();
            });
        },
        /*Animate the DIVs*/ 
        changeSlide: function(){
            //Animate the left div
            fns.leftBox.animate({
                top: '-='+fns.leftBox.height(),
                opacity: 0.0
            }, 255, function(){
                 /* You can change content in this place*/
            }).animate({
                top: 0,
                opacity: 1.0
            }, 255);
            //Animate the right div
            fns.rightBox.animate({
                top: '+='+fns.leftBox.height(),
                opacity: 0.0
            }, 255, function(){
                 /* You can change content in this place*/
            }).animate({
                top: 0,
                opacity: 1.0
            }, 255);
        }
    };
    //Start
    fns.init();

})(jQuery); //The end

将页面分为两部分，将两部分分成相反的方向

1 个答案: