0
Hé les gars, je suis normalement assez bon avec l'édition mais cette fois j'ai pensé que j'essaierais quelque chose de nouveau avec Jquery. J'essaye de créer une page de carte "3D" (Similaire à ceci: http://activeden.net/item/xml-3d-video-showcase/83740?clickthrough_id=&redirect_back=true&ref=45) mais je ne peux pas positionner les éléments et je pense que mes codes sont tous faux.Jquery positionnement d'élément et plus
Voici la JS:
$(document).ready(function() { //perform actions when DOM is ready
var z = 0; //for setting the initial z-index's
var inAnimation = false; //flag for testing if we are in a animation
var imgLoaded = 0; //for checking if all images are loaded
$('.img').each(function() {
z++;
$(this).css('z-index', z);
imgLoaded++;
});
function swapFirstLast(isFirst) {
if(inAnimation) return false; //if already swapping pictures just return
else inAnimation = true; //set the flag that we process a image
var processZindex, direction, newZindex, inDeCrease; //change for previous or next image
if(isFirst) {
processZindex = z; newZindex = 1; inDeCrease = 1;
} else {
processZindex = 1; newZindex = z; inDeCrease = -1;
} //set variables for "next" and "previous" action
$('.img').each(function() { //process each image
if($(this).css('z-index') == processZindex) { //if its the image we need to process
$(this).animate({ opacity: 0,top: $(this).height() + 'px' }, 'slow', function() {
$(this).css('z-index', newZindex) //set new z-index
.animate({top : '0' }, 'slow', function() {
inAnimation = false; //reset the flag
$(this).animate({ opacity: 1 }, 500);
});
});
} else { //not the image we need to process, only in/de-crease z-index
$(this).animate({top : '0' }, 'slow', function() { //make sure to wait swapping the z-index whe
$(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease); //in/de-crease the z-index by one
});
}
});
return false; //don't follow the clicked link
}
$('#next a').click(function() {
return swapFirstLast(true); //swap first image to last position
});
$('#prev a').click(function() {
return swapFirstLast(false); //swap last image to first position
});
});
Et voici le code HTML:
<html>
<head>
<style type="text/css">
ul { list-style: none;
margin: 200px;}
#pictures { position: relative; height: 408px;}
.img {
position: absolute;
top: 10;
left: 0;
padding: 10px;
background: #eee;
border: 1px solid #fff;
-webkit-transform: translate(0px, 0px) skew(0deg, 5deg);
}
.desc {
max-height: 30px;
text-align: center;
padding: 10px 10px 0 10px;
}
li {
border: 5px solid #c4c8cc;
-moz-box-shadow: 3px 3px 10px #888;
-webkit-box-shadow: 3px 3px 10px #888;
padding: 200px;
}
</style>
</head>
</html>
<div id="gallery">
<ul id="pictures">
<li class="img">
<div class="desc">Hello World</div>
</li>
<li class="img">
<div class="desc">Hello World</div>
</li>
</ul>
</div>
Désolé pour le désordre, mais je suis pressé de réaliser ce but - tout aide est très appréciée: D
Veuillez jeter un coup d'œil aux lignes directrices sur la mise en forme et voir si vous pouvez obtenir ce nettoyage un peu. Je vous remercie. –
Je l'ai formaté - voulez-vous dire le message du forum lui-même ou le code? –
On dirait que Meagar s'en est occupé. Ce n'était pas la chose la plus facile que j'ai lue ici auparavant (mais pas le pire des cas non plus). En ce qui concerne les animations "Carte", je ne serai pas d'un grand secours, mais au moins ceux qui pourraient aider verront mieux ce qui se passe. –