0

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

4

3 回答 3

0

我已经整理了一个类似于你所描述的东西的小模型来帮助你入门。该解决方案需要 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 以便您的其他两个导航选项保持在顶部。

这是一个有效的 jsFiddle，您可以使用它来调整效果。如果您对如何使用它有任何疑问，请随时提出，我会尽力提供帮助。

于 2013-05-13T18:48:27.840 回答
0

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

它不使用图像。它使用边界半径来制作一个圆。

演示：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;
}

希望有帮助。

于 2013-05-13T18:49:38.730 回答
0

这就是我想出的。它使用 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/

于 2013-05-13T18:49:54.690 回答