1

目前，我有一个动画，可以在悬停和左右滑动面板以显示其下方的内容。我要做的是让面板在主页的初始加载时左右滑动，然后当人们单击指向单独页面的链接时，面板返回到页面中心，一旦加载数据后，它们会左右移动以再次显示其下方的数据。

我不知道在哪里采取我必须使所有这些工作。到目前为止，这是我对 css 的通用描述：

    body {margin:0;padding:0;height:100%;width:100%;}
.overlay_container {height:100%;width:100%;overflow:hidden;}
    .box_container{  
position:relative; /* important */  
width:1280px; /* we must set a specific width of the container, so it doesn't strech when the image starts moving */  
height:953px; /* important */  
overflow:hidden; /* hide the content that goes out of the div */  
/*just styling bellow*/  
background: black;  
color:white;  
}  
.images_holder{  
position:absolute; /* this is important, so the div is positioned on top of the text */  
}  
.image_div {  
    position:relative; /* important so we can work with the left or right indent */  
    overflow:hidden; /* hide the content outside the div (this is how we will hide the part of the image) */  
    width:50%; /* make it 50% of the whole images_holder */  
    float:left; /* make then inline */  
}  
.right img{  
    margin-left: -100%; /* 100% is in this case 50% of the image, so this is how we show the second part of the image */  
}  
.clear{  
    clear:both;  
}

然后是jQuery：

$(document).ready(function() {

    //when the user hovers over the div that contains our html...
    $('.box_container').hover(function(){
        //... we get the width of the div and split it by 2  ...
        var width = $(this).outerWidth() / 2;
        /*... and using that width we move the left "part" of the image to left and right "part"
        to right by changing it's indent from left side or right side... */
        $(this).find('.left').animate({ right : width },{queue:false,duration:500});
        $(this).find('.right').animate({ left : width },{queue:false,duration:500});
    }, function(){
        //... and when he hovers out we get the images back to their's starting position using the same function... '
        $(this).find('.left').animate({ right : 0 },{queue:false,duration:500});
        $(this).find('.right').animate({ left : 0 },{queue:false,duration:500});
        //... close it and that's it
    });

});

和html：

    <div class='box_container'>  

        <!--START THE IMAGE PARTS HOLDER-->  
        <div class='images_holder'>  

            <!--INSERT THE SAME IMAGE IN 2 DIVS, THEY BOTH HAVE image_div CLASS AND left OR right CLASS DEPENDING ON POSITION-->  
            <div class='image_div left'><img class='box_image' src='1280overlay.jpg' style='width:1280px'/></div>  
            <div class='image_div right'><img class='box_image' src='1280overlay.jpg' style='width:1280px'/></div>  

            <!-- WE USED CSS FLOAT PROPERY, SO WE NEED TO CLEAR NOW-->  
            <div class='clear'></div>  

        </div>  
        <!--END THE IMAGE PARTS HOLDER-->  

        <!--START THE TEXT-->  
        Just some dummy text.  
        <!--END THE TEXT-->  

</div>

想法？

4

0 回答 0