javascript - 将页面分成两部分并向相反方向滚动两部分

Question

我想设计一个这样的网页...谁能帮我...怎么做

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

任何帮助将不胜感激

Answer 1

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

首先，您必须创建具有固定位置 的DIV 并设置z-index 以隐藏真实内容。现在，您可以创建具有两个幻灯片部分的 DIV:left 和 right 以动态显示和放置内容。

查看演示: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