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 :
Je veux donc reproduire le même effet mais sur le coin bas/droite.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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>
Si vous avez une idée de comment faire, je vous serai reconnaissant.
Merci![]()
Partager