Page Peel Effect(卷页效果)基于MooTools 或 jQuery 和 CSS

Page Peel Effect(卷页效果)基于MooTools 或 jQuery 和 CSS

Soh Tanaka 在他网上发布了一个 “简单的卷页效果(Simple Page Peel Effect with jQuery & CSS.)” ,像这样的卷页效果或翻页效果,在一些门户网站或者是个人博客上经常能看得到
它实现的思路是有一个 “peel” 图片放在元素的右上方 ,当你徘徊在“Peel”时, “peels ”就会打开 和 “peels” 就会关闭,卷页里可以放置广告或者是订阅信息。这个很炫的效果看起来要通过flash来实现,不过,使用jQuery 或 MooTools 技术就可以轻松实现。

Page Peel Effect

Simple Page Peel Effect with MooTools & CSS

The MooTools Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
(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,$$);

演示:http://davidwalsh.name/dw-content/page-flip.php

教程:http://davidwalsh.name/peel-effect

Simple Page Peel Effect with jQuery & CSS

The jQuery Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(document).ready(function(){
 
//Page Flip on hover
 
	$("#pageflip").hover(function() {
		$("#pageflip img , .msg_block").stop()
			.animate({
				width: '307px', 
				height: '319px'
			}, 500); 
		} , function() {
		$("#pageflip img").stop() 
			.animate({
				width: '50px', 
				height: '52px'
			}, 220);
		$(".msg_block").stop() 
			.animate({
				width: '50px', 
				height: '50px'
			}, 200);
	});
 
 
});

演示:http://www.sohtanaka.com/web-design/examples/peeling-effect/

教程:http://www.sohtanaka.com/web-design/simple-page-peel-effect-with-jquery-css/

站点统计