Adapter un PagePeel en jQuery

Version imprimable

Bonjour à tous,

Je suis confronté à un petit problème, j'ai mis un simple PagePeel en place. Un PagePeel c'est un effet de page qui se tourne.

Cependant je n'arrive pas à modifier mon script pour effectuer l'effet sur le coin en bas à droite de la page.

Voici ma page : http://s168201440.onlinehome.fr/jQuery/home_v2.html

Voici le code complet de la page :

Code:

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simple Page Peel Effect</title>
 
 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
$(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);
	});
 
 
});
</script> 
<style type="text/css">
body {margin:0px};
img { behavior: url(iepngfix.htc) }
#pageflip {
	position: relative;
	right: 0; top: 0;
	float: right; 
}
#pageflip img {
	width: 50px; height: 52px;
	z-index: 99;
	position: absolute;
	right: 0; top: 0;
	-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
	width: 50px; height: 50px;
	overflow: hidden;
	position: absolute;
	right: 0; top: 0;
	background: url(images/page_flip_flap.png) no-repeat right top;
}
</style>
</head>
<body bgcolor="gray">
 
 
	<div id="pageflip">
		<img src="images/page_flip.png" alt="" border="0"/>
		<div class="msg_block"></div>
	</div>
 
 
</body>
</html>

Je veux donc reproduire le même effet mais sur le coin bas/droite.

Si vous avez une idée de comment faire, je vous serai reconnaissant.

Merci :)

Bonjour

J'y suis presque à part l'image avec le visage qui n'apparaît pas en bas, mais je n'ai plus le temps ce matin, car je dois aller en cuisine. Les img flap2 sont identiques aux img flap à un quart de tour près.

Code:

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
body { margin:0 }
 
#pageflip {
	position: fixed;
	right: 0; top: 0;
	/*float: right; */
}
#pageflip img {
	width: 50px; height: 52px;
	z-index: 99;
	position: absolute;
	right: 0; top: 0;
	-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
	width: 50px; height: 50px;
	overflow: hidden;
	position: absolute;
	right: 0; top: 0;
	background: url(http://s168201440.onlinehome.fr/jQuery/images/page_flip_flap.png) no-repeat right top;
}
 
#pageflip2 {
	position: fixed;
	right: 0; bottom: 0;
	/*float: right; */
}
#pageflip2 img {
	width: 50px; height: 52px;
	z-index: 99;
	position: absolute;
	right: 0; bottom: 0;
	-ms-interpolation-mode: bicubic;
}
#pageflip2 .msg_block2 {
	width: 50px; height: 50px;
	overflow: hidden;
	position: absolute;
	right: 0; bottom: 0;
	background: url(page_flip_flap2.png) no-repeat right bottom;
}
 
	</style>
</head>
<body>
	<div id="pageflip"> 
		<img src="http://s168201440.onlinehome.fr/jQuery/images/page_flip.png" alt="" border="0"/> 
		<div class="msg_block"></div> 
	</div> 
	<div id="pageflip2"> 
		<img src="page_flip2.png" alt="" border="0"/> 
		<div class="msg_block2"></div> 
	</div>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script>
		$(function(){
 
$("#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);
	}
);
 
$("#pageflip2").hover(
	function(){
		$("#pageflip2 img, .msg_block2")
			.stop()
			.animate({
				width: '307px', 
				height: '319px'
			}, 500); 
	},
	function(){
		$("#pageflip2 img")
			.stop() 
			.animate({
				width: '50px', 
				height: '52px'
			}, 220);
 
		$(".msg_block2")
			.stop() 
			.animate({
				width: '50px', 
				height: '50px'
			}, 200);
	}
);
 
		});
	</script>
</body>  
</html>

21/01/2011, 12h09
mathieugut

Merci c'est bon ça marche, en fait fallait remplacer les top par des bottom apparement. Encore merci ;)