Sexy Album Art with MooTools or jQuery

The XHTML

<span id="album">
	<span id="album-front"></span>
	<span id="album-back"></span>
	<span id="album-desc">
		<h3>Every Picture Tells A Story</h3>
		<p>
			Every Picture Tells a Story is the third album by Rod Stewart, released in the middle of 1971. It became Stewart s most critically acclaimed album, and became the standard by which all of his subsequent albums were judged.<br />
			<a href="javascript:;" style="font-weight:bold;">Buy Now!</a> | <a href="javascript:;">More Rod Stewart Albums</a>
			<br /><img src="everypicture-stars.gif" alt="5 Stars!" style="margin-top:10px;" />
		</p>
	</span>
</span>

几个DIVs和《汇编》资料。

The CSS

#album			{ width:500px; position:relative; }
#album-front	{ width:400px; height:393px; background:url(everypicture-front.png) 0 0 no-repeat; cursor:pointer; position:absolute; top:0; left:0; z-index:1; }
#album-back		{ display:none; width:250px; height:194px; position:absolute; top:250px; left:250px; background:url(everypicture-back.png) 0 0 no-repeat; z-index:3; }
#album-desc		{ display:none; font-size:10px; font-family:tahoma; border:1px sopd #7B7057; padding:10px; width:230px; position:absolute; top:20px; left:250px; z-index:3; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; background:#fff; }

中央支助事务主要用于定位和图像。 我选择将“册”图像作为背景图像——如果你愿意,你可以使用“国际房联”。

The MooTools JavaScript

(function($) {
	window.addEvent( domready ,function() { 
		//settings
		var fades = $$( #album-back,#album-desc );
		//init
		fades.setStyles({
			opacity: 0,
			display:  block 
		});
		//hover version
		$( album ).addEvents({
			mouseenter: function() {
				fades.fade( in );
			},
			mouseleave: function() {
				fades.fade( out );
			}
		});
	});
})(document.id);

简单地 in死——更不用说。

The jQuery JavaScript

$(document).ready(function() {
	//settings
	var fades = $( #album-back,#album-desc );
	//hover version
	$( #album ).hover(function() {
		fades.fadeIn(250);
	}, function() {
		fades.fadeOut(250);
	});
});

View MooTools Demo View jQuery Demo

我认为,这大大有助于以其他方式展示出一些活力。 Rod Stewart FTW!