mootools_使用MooTools进行页面剥离效果

mootools

Soh Tanaka release a great script back in May titled Simple Page Peel Effect with jQuery & CSS. The idea is that you place a "peel" image on the upper-right side of an element which, when hovered, "peels" open and peels close. I thought this was a quality, flexible idea so I've ported the jQuery code to MooTools.

Soh Tanaka于5月发布了一个很棒的脚本，名为jQuery＆CSS的Simple Page Peel Effect 。 想法是，将“剥离”图像放置在元素的右上侧，将其悬停时，“剥离”打开并剥离关闭。 我认为这是一个高质量，灵活的想法，因此我已将jQuery代码移植到MooTools。

View Demo 观看演示

XHTML (The XHTML)

<div id="page-flip">
	<a href="http://feeds.feedburner.com/BluDice"><img src="page_flip.png" alt="Subscribe!" id="page-flip-image" /></a>
	<div id="page-flip-message"></div>
</div>

A wrapper DIV containing an image and a "message" DIV.

包含图像和“消息” DIV的包装程序DIV。

CSS (The CSS)

#page-flip { position:relative; right:0; top:0; float:right;  }
#page-flip-image { width:50px; height:52px; z-index:99; position:absolute; right:0; top:0; -ms-interpolation-mode:bicubic; }
#page-flip-message { width:50px; height:50px; overflow:hidden; position:absolute; right:0; top:0; background:url(subscribe.png) no-repeat right top; }

These initial CSS is important as we'll be modifying this initial CSS with MooTools.

这些初始CSS很重要，因为我们将使用MooTools修改此初始CSS。

MooTools JavaScript (The MooTools JavaScript)

(function($,$$) { window.addEvent('domready',function() {
	
	var flip = $('page-flip');
	var flipImage = $('page-flip-image');
	var flipMessage = $('page-flip-message');
	
	flip.addEvents({
		mouseenter:function() {
			$$(flipImage,flipMessage).set('morph',{ duration: 500 }).morph({
				width: 307,
				height: 319
			});
		},
		mouseleave:function() {
			flipImage.set('morph',{ duration: 220 }).morph({
				width: 50,
				height: 52
			});
			flipMessage.set('morph',{ duration:200 }).morph({
				width: 50,
				height:50
			});
		}	
	});
}); })(document.id,$$);

The peel effect is triggered by mouseenter and mouseleave events on the outter DIV element. You'd think there was more to it but the effect is driven simply by width and height animations.

剥离效果是由outter DIV元素的mouseenter和鼠标离开事件触发。 您可能会想到更多，但效果仅受宽度和高度动画驱动。

View Demo 观看演示

What do you think about this effect? Would you use it? Too "flashy?" Share!

您如何看待这种影响？ 你会用吗？ 太“浮华？” 分享！

翻译自: https://davidwalsh.name/peel-effect

mootools