jQuery Girl
  1. jQuery Girl
  3. JQuery Cloud Carousel qui défile verticalement
Intereting Posts
Lien vers une ancre dans le contenu à tabs de JQuery Un appel Ajax peut-il se terminer avant le chargement du DOM? Mise en œuvre de la roue circulaire dans jQuery Mobile? Mélanger jQuery et YUI ensemble dans une application, est-ce facilement possible? Utiliser prevent default pour reprendre la barre d’espace Désactiver le clic droit sur un ou une classe spécifique “ Je veux capturer une vidéo en utilisant le plugin webcam jQuery Convertir une liste séparée par des virgules en JSON en utilisant Javascript récupérer des éléments enfants de svg g couleurs aléatoires jquery foreach div mon violon jQuery ne fonctionne pas Transformation CSS3 lors du défilement Comment créer des widgets déplaçables? Comment capturer le flou et la mise au sharepoint toute la fenêtre du navigateur? Comment jQuery réalise-t-il le chaînage de commandes?

JQuery Cloud Carousel qui défile verticalement

Je cherche à prendre le carrousel de nuages ​​du professeur Cloud sur http://www.professorcloud.com/mainsite/carousel.htm et à le faire défiler verticalement. Je peux voir que les reflets peuvent être un problème avec un défilement vertical et s’ils sont d’accord, je peux les faire sans eux, je voudrais une option pour les activer si possible. Merci pour toute votre aide. (J’en ai besoin pour tenir ici: http://www.inspiritandintruth.com sur la barre de droite.)

J’ai le même problème. J’ai trouvé ces deux qui ont le même effet 3d et prennent en charge le défilement vertical hors de la boîte.

http://www.jacksasylum.eu/ContentFlow/

http://www.bkosborne.com/jquery-waterwheel-carousel

Je suppose que vous pouvez utiliser l’un d’entre eux ou consulter leur code pour voir comment ils l’ont fait.

J’espère que cela pourra aider.

B

Donc, après avoir fouillé dans le code, j’ai finalement compris. Au cas où quelqu’un essaierait de faire cela sur son propre site, voici ce que j’ai obtenu: À la ligne 260 de la version non minifiée, vous avez deux lignes comme celle-ci: 

x = this.xCentre + (( (funcCos(radians) * this.xRadius) - (item.orgWidth*0.5)) * scale); y = this.yCentre + (( (sinVal * this.yRadius) ) * scale);

Il suffit de les changer pour: 

 y = this.yCentre + (( (funcCos(radians) * this.yRadius) - (item.orgWidth*0.5)) * scale); x = this.xCentre + (( (sinVal * this.xRadius) ) * scale);

Remarquez comment x et y ont été commutés (3x)

Vous aurez besoin de déconner avec le matériel d’initialisation, en particulier les xPos et xRadius, voici mes résultats finaux: 

 $("#bookscroll").CloudCarousel({ xPos: 11, yPos: 170, xRadius: 16, yRadius: 170, buttonLeft: $("#book-down"), buttonRight: $("#book-up"), altBox: $("#book-alt"), titleBox: $("#book-title"), mouseWheel: true, bringToFront: true, autoRotate: 'left', speed: 0.02, autoRotateDelay: 4000 });

J’espère que cela aide quelqu’un, vous pouvez le voir en action (et encore plus hautement personnalisé) sur http://www.inspiritandintruth.com