mootools_MooTools或jQuery的性感专辑封面_culuo8053的博客-程序员宅基地

技术标签: css  定位  js  html  jquery  

mootools

Album Art

The way that album information displays is usually insanely boring. Music is supposed to be fun and moving, right? Luckily MooTools and jQuery allow us to communicate that creativity on the web.

相册信息显示的方式通常很无聊。 音乐应该是有趣而动人的,对吗? 幸运的是,MooTools和jQuery允许我们在网络上交流这种创造力。

XHTML (The XHTML)


<div id="album">
	<div id="album-front"></div>
	<div id="album-back"></div>
	<div 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>
	</div>
</div>


A few structure DIVs and the album information.

一些结构的DIV和专辑信息。

CSS (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 solid #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 CSS is used mostly for positioning and the imagery. I chose to incorporate the album images as background images -- you could use IMG tags if you want.

CSS主要用于定位和图像。 我选择将专辑图像作为背景图像合并-如果需要,可以使用IMG标签。

MooTools JavaScript (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);


Simple fading in and fading out -- nothing more.

简单的淡入和淡出-仅此而已。

jQuery JavaScript (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);
	});
});


I think this is a great way to add some dynamism to an otherwise boring display. Rod Stewart FTW!

我认为这是在原本无聊的显示中增加动感的好方法。 罗德·斯图尔特FTW!

翻译自: https://davidwalsh.name/album-art

mootools

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/culuo8053/article/details/107909375

智能推荐

随便推点