旋转特色框

这就是我们要构建的

它的完整效果（包括过渡动画）将在较新的 WebKit 和 Opera 浏览器以及 Firefox 4 中工作（截至今天，在 真正的 Beta 版 中）。 任何其他浏览器都会旋转块，但没有过渡动画。

查看演示   下载文件

有趣的部分

所有动画都是 CSS3 过渡。 JavaScript 仅观察点击并根据需要应用和删除类。 为什么不也使用 JavaScript 进行动画以获得更广泛的浏览器支持？ CSS3 更适合这种情况。 动画效果更好（硬件加速）。 它不会减慢其他 JavaScript。 将动画保存在 CSS 中也更容易编写。 使用 JavaScript，我们无法轻松地 *将动画应用到类*。

随着时间的推移，越来越多的动画将从 JavaScript 库转移到 CSS。

HTML

我们将给自己一个语义包装器，它也为所有块提供相对定位上下文。 块使用绝对定位进行定位，最终通过更改其顶部/左侧值来进行动画，因此该相对上下文非常重要。 每个块都有一个带有唯一 ID 的 div 包装器，以及一个指示其当前状态的类名。 有三个不言自明的状态类，从显而易见的 active 开始，它是当前处于完全可见的左端状态的块。

每个块都有一个仅在非活动状态下可见的副标题，以及另一个包含在块处于活动状态时要显示的所有内容的 div 包装器。 副标题的想法提供了提供某种简短预告片并吸引点击的机会。

<div id="rotator">

	<div id="block-1" class="active">
		<h2>Subtitle #1</h1>
		<div>
			<h1>Seven Space Frogs Descend On Canada's Largest City</h1>
			<img src="spacefrog.jpg" alt="space frog">
			<p>Commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
		</div>
	</div>
	
	<div id="block-2" class="non-active-top">
		<h2>Subtitle #2</h2>
		<div>
			<h1>The Power of the Voodoo. Who do? You do.</h1>
			<img src="goblins.jpg" alt="goblins">
			<p>Ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
		</div>			
	</div>
	
	<div id="block-3" class="non-active-bottom">
		<h2>Subtitle #3</h2>
		<div>
			<h1>You May Find Yourself Living in a Shotgun Shack</h1>
			<p>Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
		</div>			
	</div>

</div>

CSS

设置包装器和上下文

#rotator { width: 920px; height: 280px; position: relative; background: white; padding: 20px; }

对任何块的唯一样式可以通过 ID 完成

#block-1 { background: #d5fcff; }
#block-2 { background: #e1ffd5; }
#block-3 { background: #ffffd8; }

每个块共享一些属性，因为溢出是隐藏的，它们是绝对定位的，并且将以相同的速度进行动画

#rotator > div { 
	position: absolute; 
	overflow: hidden;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}

框的三个状态决定了它们的大小和位置

#rotator .active { top: 20px; left: 20px; width: 580px; height: 280px; }
#rotator .non-active-top { top: 20px; left: 620px; height: 130px; width: 320px; }
#rotator .non-active-bottom { top: 170px; left: 620px; height: 130px; width: 320px; }

副标题（h2）最终与框大小相同，方法是将其行高设置为与框高度相同。 由于溢出是隐藏的，这会将所有其他内容推开并隐藏。 然后，当框处于活动状态时，我们隐藏副标题，所有其他内容自然地显示出来。

#rotator h2 {
	text-align: center; 
	line-height: 130px;
}
#rotator .active h2 {
	display: none;
}

jQuery

我们创建了一个 rotate 函数，该函数根据 current 值将正确的类应用于正确的块。 可能有一种更干净的方法可以做到这一点，并且扩展性更好……

function rotate() {
				
	if (current == 1) {
		$("#block-1").removeClass().addClass("active");
		$("#block-2").removeClass().addClass("non-active-top");
		$("#block-3").removeClass().addClass("non-active-bottom");
	} else if (current == 2) {
		$("#block-1").removeClass().addClass("non-active-bottom");
		$("#block-2").removeClass().addClass("active");
		$("#block-3").removeClass().addClass("non-active-top");
	} else {
		$("#block-1").removeClass().addClass("non-active-top");
		$("#block-2").removeClass().addClass("non-active-bottom");
		$("#block-3").removeClass().addClass("active");
	}

}

然后，我们为每个块附加一个点击处理程序。 当它们被点击时，我们通过其 ID 确定它是哪个，将当前值设置为该值，并调用 rotate 函数。

$("#rotator div").click(function() {
	current = this.id.substr(6);			
	rotate();
});

感谢 Andrea Canton 提供的关于检查哪个块被点击的想法，这使块能够双向旋转，这更令人满意。

现在全部放在一起

因此，您点击一个块，该块的类会被调整。 新的类具有不同的尺寸和位置值。 由于块应用了过渡 CSS，因此这些新的尺寸和位置值会进行动画。 简单易懂。

查看演示   下载文件

---

*jQuery UI 能够通过扩展 jQuery 的 addClass 将动画应用到类。 但是，在这种情况下它不够好，因为我们需要先删除之前的类（将其移回默认位置），然后才能添加新的类，这会导致动画跳跃和错误。