循环页面转换答案

【问题标题】：Circular page transitions循环页面转换
【发布时间】：2013-05-07 20:48:17
【问题描述】：

我正在尝试动画和页面转换，尝试创建一个包含 3 个用作导航按钮的圆形图像的页面。当您单击其中一个时，我希望圆圈扩大以填满整个页面，从而成为其背景。

【问题讨论】：

嗯，这是我的问题，我不确定从哪里开始。目前我一直在弄乱最近这个问题的代码：stackoverflow.com/questions/9320658/… 这是扩大圈子的好方法，我想我可以让它填满整个网页，但它会覆盖整个页面并且不会圈出背景图片，这是我想要的。

标签： jquery-animate transition css-animations

【解决方案1】：

这就是我想出的。它使用 CSS3 制作动画，使用 jQuery 应用 css!。

HTML

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="background"></div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</body>
</html>

CSS

.background, body {
  -webkit-transition: all 1s;
}
.background {
  background: url(http://dribbble.s3.amazonaws.com/users/5299/screenshots/1068946/akm-94_1x.jpg);
  height: 100px;
  width: 100px;
  background-size: cover;
  border-radius: 50%;
  position: relative;
  /* z-index: -1; */
}

jQuery

$(function () {
$('.background').hover(function() {
  $('.background').css({'width': 100 + '%', 'height' : 100 + '%', 'border-radius': 0, 'position': 'absolute', 'z-index': -1});
}, function () {
   $('.background').css({'width': '100', 'height' : '100', 'border-radius': 50 + '%', 'position': 'relative', 'z-index': 1});
});
});

http://jsbin.com/orawin/2/

【讨论】：

【解决方案2】：

这是一个非常简单的起点。

它不使用图像。它使用border-radius来做一个圆。

演示：http://jsfiddle.net/kPcPB/

.circle{
    position:absolute;
    width:300px;
    height:300px;
    top:50%;
    left:50%;
    margin-left:-150px;
    margin-top:-150px;
    background:lime;
    border-radius:50%;
    -webkit-transition:all 3s;
}

希望对您有所帮助。

【讨论】：

【解决方案3】：

我已经整理了一些类似于您所描述的内容的小模型来帮助您入门。此解决方案需要 jQuery 和 jQuery UI，本质上是创建一个动画来炸毁圆形 DIV 元素以填充整个页面。

HTML：

<div class="circle">
    <div>RED Contents go here!</div>
</div>
<div class="circle">
    <div>GREEN Contents go here!</div>
</div>
<div class="circle">
    <div>BLUE Contents go here!</div>
</div>

CSS：

.circle {
    display: inline-block;
    position: absolute; left: 50%; top: 50%;
    height: 50px; width: 50px;
    margin: -25px 0 0 -25px;
    cursor: pointer;
    border-radius: 25px;
    z-index: 0;
}
.circle:nth-child(1) { background: red; margin-left: -80px; }
.circle:nth-child(2) { background: green; }
.circle:nth-child(3) { background: blue; margin-left: 30px; }
.circle > div { display: none; }
.circle.expanded > div { display: block; }

jQuery:

$('.circle').on('click', function() {
    var $this = $(this);
    $this.css('z-index', 2)
    .siblings('.circle').removeClass('expanded').css('z-index', 1);
    $this.animate({
        left: 0, top: 0, margin: 0, 
        width: '100%', height: '100%',
        'border-radius': 0, padding: '60px 5px 5px 5px'
    }, 1000).addClass('expanded');
    $this.siblings('.circle').animate({
        left: 0, top: 0, height: 50, width: 50,
        'border-radius': 25, padding: '0'
    }).first().css({ 'margin': '5px' })
      .next().css({ 'margin': '5px 5px 5px 55px' });
    $this.css('z-index', 0);
});

基本上，这允许您创建三个DIV 元素，每个元素都包含您要显示的单独页面的 HTML。最初的 CSS 将所有 3 个圆圈放在页面中间，并使其所有子元素不可见。

然而，一旦您单击一个，jQuery .animate() 调用将调整各种元素的位置，展开单击的元素以填充窗口，并移动 z-indexes 以便您的其他两个导航选项保持打开状态顶。

Here is a working jsFiddle 可以用来调整效果。如果您对如何使用它有任何疑问，请随时提出，我会尽力提供进一步的帮助。

【讨论】：