Question

我在单独的页面上有两个相同的div - 有没有办法让它们从起始位置登陆页面动画到第二页上的位置并打开第一个内容div（蓝色）所以基本上动画左边制作一条垂直线而不是立方体。

所以从这里http://www.crazyedits.co.uk/

到这里http://www.crazyedits.co.uk/home.php#并打开第一个彩色div？

我刚刚开始学习，所以试着保持简单的窥视（对不起，如果我的问题很明显） - 但我已经尝试了5个小时找到解决方案，似乎没有任何工作。

着陆页按钮

<div class="button1">
    <div id="icon"><img src="Images/home.png" width="200" height="160" /></div>
    <div id="title">HOME</div>
</div>

内容页面按钮

<div>   <div class="content_button1">
    <div ="icon"><a href="#home_page" ><img src="Images/home.png" width="200" height="160" style="border:none;" /></a></div>
    <div id="title"><li><a href="#home_page" >HOME</a></li></div>
    <div id="home_page" class="contain"></div> </div>
</div>

CSS

我认为我遇到的问题是我必须为每个页面上的按钮设置2个不同的css集 - 一个在中心对齐它们，另一个在左边对齐它们。因此，如果有一种方法可以使用相同的类并且仍然可以获得正方形中的4并且与绝对位置有关，那么我将更接近于使其工作

/******page buttons*******/

.content_button1{width:199px; height:199px; margin:0px 0px 19px 0px; background-color:#09C;} 
.content_button2{width:199px; height:199px; margin:19px 0px 19px 0px; background-color:#C00;} 
.content_button3{width:199px; height:199px; margin:19px 0px 19px 0px; background-color:#F60;} 
.content_button4{width:199px; height:199px; margin:19px 0px 19px 0px; background-color:#093;} 

/*****landing page buttons*****/

.button1{width:199px; height:199px; float:left; margin:20px ; background-color:#09C;} 
.button2{width:199px; height:199px; float:left; margin:20px ; background-color:#C00;} 
.button3{width:199px; height:199px; float:left; margin:20px ; background-color:#F60;} 
.button4{width:199px; height:199px; float:left; margin:20px ; background-color:#093;}

Answer 1

检查出来：JSFIDDLE

CSS

.button {width:199px; height:199px; position:absolute}
#top-left {background-color:#09C;} 
#top-rite {background-color:#C00;}
#bot-left {background-color:#F60;}
#bot-rite {background-color:#093;}

#top-left.pos  {left:50%; margin-left: -110px; top:0px; }
#top-rite.pos  {left:50%; margin-left: 110px; top:0px; }
#bot-left.pos  {left:50%; margin-left: -110px; top:220px; }
#bot-rite.pos  {left:50%; margin-left: 110px; top:220px; }

您可以通过这样的方式查看类和ID的结构，以便轻松获得左侧位置。如果你想要一些光滑的动画效果，你可能想看看这个：http://api.jquery.com/animate

JQuery的

$(document).ready(function(){
    $('.button').click(function(){

        $('#center_content').css('margin-top','0');
        $('#top-left').css('left','0').css('margin-left','0').css('top','10px');
        $('#top-rite').css('left','0').css('margin-left','0').css('top','220px');
        $('#bot-left').css('left','0').css('margin-left','0').css('top','430px');
        $('#bot-rite').css('left','0').css('margin-left','0').css('top','640px');
    });        
});

Answer 2

由于页面2在浏览器中加载并且动画是通过JS完成的，因此您无法在2页之间制作动画。最好的解决方案是将你的东西放在一个页面中并以绝对位置进行游戏。

我写了一段可能有点复杂的代码，但我做了很多评论，以便向你解释所有的东西。

四个方块首先位于页面中央，并在调整窗口大小时重新定位。

然后，当您单击四个方格中的一个时，将启动一个动画并显示相应的内容。

之后，点击另一个方块会显示相应的内容。

祝你好运！

http://fiddle.jshell.net/4SZXT/11/＆lt; - 代码在这里

在两页之间加载动画div

2 个答案: