par
sylvaing26 » 17 sept. 2009, 12:10
oui bien l'exemple avec JQuery c'est exactement ca que je veu mettre en place.
par contre je ne sais pas ou rentrer le code jquery. (je travail en php et html)
dois-je créé un nouvelle page avec un extension particuliere pour jquery ?
Tu as tout ce qu'il faut pour le mettre en place sur le lien, ok c'est en anglais ...
JQuery est une bibliotheque javascript donc il faut que tu l'indique dans la balise HEAD
Un clic de droit et affichage de la source de la page de demo t'en dira d'avantage !
http://www.sohtanaka.com/web-design/exa ... ng-effect/
Code : Tout sélectionner
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simple Page Peel Effect with jQuery & CSS</title>
<link rel="stylesheet" type="text/css" href="http://www.pixeldesignstudios.com/styles.css" />
<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">
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(subscribe.png) no-repeat right top;
}
</style>
</head>
[quote="fabrice88250"]oui bien l'exemple avec JQuery c'est exactement ca que je veu mettre en place.
par contre je ne sais pas ou rentrer le code jquery. (je travail en php et html)
dois-je créé un nouvelle page avec un extension particuliere pour jquery ?[/quote]
Tu as tout ce qu'il faut pour le mettre en place sur le lien, ok c'est en anglais ... :lol:
JQuery est une bibliotheque javascript donc il faut que tu l'indique dans la balise HEAD
Un clic de droit et affichage de la source de la page de demo t'en dira d'avantage !
[url]http://www.sohtanaka.com/web-design/examples/peeling-effect/[/url]
[code]<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simple Page Peel Effect with jQuery & CSS</title>
<link rel="stylesheet" type="text/css" href="http://www.pixeldesignstudios.com/styles.css" />
<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">
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(subscribe.png) no-repeat right top;
}
</style>
</head>
[/code]
