IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Adapter un PagePeel en jQuery


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre expérimenté
    Avatar de mathieugut
    Profil pro
    Webmaster
    Inscrit en
    Mars 2008
    Messages
    225
    Détails du profil
    Informations personnelles :
    Localisation : France, Gard (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Mars 2008
    Messages : 225
    Par défaut Adapter un PagePeel en jQuery
    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 : 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>
    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
    Bienvenue dans la matrice, attention à bien lire les règles...

    .::Mon espace perso developpez.com ::.

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    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 : 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
    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>

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre expérimenté
    Avatar de mathieugut
    Profil pro
    Webmaster
    Inscrit en
    Mars 2008
    Messages
    225
    Détails du profil
    Informations personnelles :
    Localisation : France, Gard (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Mars 2008
    Messages : 225
    Par défaut
    Merci c'est bon ça marche, en fait fallait remplacer les top par des bottom apparement. Encore merci
    Bienvenue dans la matrice, attention à bien lire les règles...

    .::Mon espace perso developpez.com ::.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [Plugin] Compréhension et adaptation plugin NanoGallery with Jquery
    Par darkterreur dans le forum jQuery
    Réponses: 0
    Dernier message: 15/09/2014, 12h52
  2. Adapter jQuery à ses besoins
    Par doud180878 dans le forum jQuery
    Réponses: 1
    Dernier message: 08/05/2010, 12h30
  3. fade color using jquery : adapter le code
    Par knebhi dans le forum jQuery
    Réponses: 1
    Dernier message: 12/01/2010, 11h46
  4. Parser JSON avec $.getJSON jquery adaptation code
    Par MatthieuFourcade dans le forum jQuery
    Réponses: 2
    Dernier message: 22/06/2009, 10h17

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo