0

我在单独的页面上有两个相同的 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;}
4

2 回答 2

0

看看这个：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');
    });        
});​
于 2012-10-29T22:06:10.443 回答
0

您不能真正在 2 个页面之间制作动画，因为第 2 页是在浏览器中加载的，并且动画是通过 JS 完成的。最好的解决方案是将您的东西放在一个页面中并使用绝对位置进行播放。

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

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

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

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

祝你好运 ！

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

于 2012-10-29T22:57:50.747 回答