jQuery crée un effet de rotation d'image

J'ai déjà utilisé JQuery pour écrire un effet de rotation d'image dans le sens de la profondeur. Je vais le partager avec vous ici et coller une image pour voir à quoi ressemble l'effet :

Le principe de mise en œuvre n'est pas compliqué. Seule la fonction sinus est utilisée en mathématiques. Le processus de production est à peu près le suivant :

(1) Définissez d'abord le rayon de rotation de l'image

( 2 ) Le processus de rotation de l'image nécessite l'utilisation de la méthode setInterval() pour obtenir l'angle de la position de chaque image. L'angle changera progressivement en fonction du temps

(3) Selon une formule mathématique : x=R* SIN(deg) peut obtenir la position de l'image dans la direction X

(4) Le paramètre de transparence est en fait basé sur l'angle de rotation de l'image. Le réglage initial est de 0 degré lorsque l'image est directement devant. Qu'elle soit tournée dans le sens des aiguilles d'une montre ou dans le sens inverse, lorsque l'angle de rotation de l'image est supérieur à 0 degré

et inférieur à 180 degrés, la transparence de l'image sera diminuer progressivement. Ici, afin de garantir que l'image est dans Une petite formule de calcul est ajoutée pour éviter qu'elle ne soit complètement transparente à 180 degrés. Le code sera affiché ci-dessous.

(5) La mise à l'échelle de l'image est également basée sur l'angle de rotation de l'image, ce qui, je pense, est facile à comprendre.

(6) Après avoir obtenu les informations de position sur l'axe X, les informations de zoom et les informations de transparence de l'image, l'étape suivante est très simple : affichez simplement toutes les informations via les styles CSS.

Le style CSS sera progressivement modifié grâce à la méthode setInterval().

Jetons un coup d'œil au code principal :

var thisleft=-(o.radius)*Math.sin((360/imgnum)*$(this).data("index")*(Math.PI*2/360))+(holderwidth/2);
 var thiszindex=360/imgnum*$(this).data("index")>180?360/imgnum*$(this).data("index")-360:-360/imgnum*$(this).data("index");
 var thisopacity=360/imgnum*$(this).data("index")<=180?(180-360/imgnum*$(this).data("index"))/180*1.2:
  (360/imgnum*$(this).data("index")-180)/180*1.2;

Le thiszindex dans la deuxième ligne correspond aux informations de profondeur de l'image. J'en ai ajouté une à chaque image. . L'attribut index enregistre sa valeur d'index et l'image calculera la valeur de profondeur correspondante en fonction de ces informations.

La thisopacité de la troisième ligne est l'information de transparence de l'image.

Chaque image recevra le style CSS suivant :

$(this).css({
  "left":thisleft-(o.width*thisopacity)/2+"px",
  "top":(holderheight/2)-o.width*(thisopacity+1)/4,
  "z-index":thiszindex+180,
  "opacity":(thisopacity+0.2)/1.2,
  "width":o.width*(thisopacity+1)/2,
  "height":o.height*(thisopacity+1)/2
  });

L'opacité de la cinquième ligne utilise une formule simple pour la rendre invisible au niveau le plus profond. Quant à la transparence totale.

En termes de fonction, j'ai ajouté la fonction de tourner à gauche et à droite. Le principe est de convertir les valeurs positives et négatives des informations de l'axe X de l'image. :

if(dir=='left'){
  thisleft=-(o.radius)*Math.sin(xx*(Math.PI*2/360))+(holderwidth/2);
  }else{
  thisleft=(o.radius)*Math.sin(xx*(Math.PI*2/360))+(holderwidth/2);
  }

Les utilisateurs peuvent personnaliser les paramètres de l'ensemble de l'effet :

$.fn.scroll3d.defaults={
 speed:25,
 radius:100,
 width:200,
 height:150,
 direction:'left'
 }

Le code complet de l'effet est joint ci-dessous :

(function($) {
 $.fn.scroll3d = function(options) {
 var opts = $.extend({}, $.fn.scroll3d.defaults, options);
 var $this = $(this);
 var o = $.meta ? $.extend({}, opts, $(this).data()) : opts;
 var radius = o.radius;
 var timer = 0;
 var xx = 0;
 var speed = o.speed;
 var dir = o.direction;
 $(this).hide();
 return this.each(function() {
 var $img = $(this).find('img').css({'position': 'absolute'}), num = 0;
 var imgnum = $img.length;
 var holderwidth = $(this).width(),
 holderheight = $(this).height();
 $img.each(function(i) {
 var imgsrc = $(this).attr("src");
 $(this).data({
 "index": i
 });
 $(this).load(function() {
 ++num;
 if (num == imgnum) {
 $this.show();
 }
 }).attr({
 "src": imgsrc
 });
 var thisleft = -(o.radius) * Math.sin((360 / imgnum) * $(this).data("index") * (Math.PI * 2 / 360)) + (holderwidth / 2);
 var thiszindex = 360 / imgnum * $(this).data("index") > 180 ? 360 / imgnum * $(this).data("index") - 360 : -360 / imgnum * $(this).data("index");
 var thisopacity = 360 / imgnum * $(this).data("index") <= 180 ? (180 - 360 / imgnum * $(this).data("index")) / 180 * 1.2 :
 (360 / imgnum * $(this).data("index") - 180) / 180 * 1.2;
 $(this).attr({
 "nowdeg": (360 / imgnum) * $(this).data("index")
 });
 $(this).css({
 "left": thisleft - (o.width * thisopacity) / 2 + "px",
 "top": (holderheight / 2) - o.width * (thisopacity + 1) / 4,
 "z-index": thiszindex + 180,
 "opacity": (thisopacity + 0.2) / 1.2,
 "width": o.width * (thisopacity + 1) / 2,
 "height": o.height * (thisopacity + 1) / 2
 });
 });
 function scrollimg() {
 $img.each(function() {
 var thisdeg = $(this).attr(&#39;nowdeg&#39;);
 var thisleft;
 xx = thisdeg;
 if (dir == &#39;left&#39;) {
 thisleft = -(o.radius) * Math.sin(xx * (Math.PI * 2 / 360)) + (holderwidth / 2);
 } else {
 thisleft = (o.radius) * Math.sin(xx * (Math.PI * 2 / 360)) + (holderwidth / 2);
 }
 var thiszindex = xx > 180 ? xx - 360 : -xx;
 var thisopacity = xx <= 180 ? (180 - xx) / 180 : ($(this).attr(&#39;nowdeg&#39;) - 180) / 180;
 $(this).css({
 "left": thisleft - (o.width * thisopacity) / 2 + "px",
 "top": (holderheight / 2) - o.width * (thisopacity + 1) / 4,
 "z-index": thiszindex + 180,
 "opacity": (thisopacity + 0.2) / 1.2,
 "width": o.width * (thisopacity + 1) / 2,
 "height": o.height * (thisopacity + 1) / 2
 });
 xx++;
 if (xx > 360) xx = 0;
 $(this).attr({
 "nowdeg": xx
 });
 });
 };
 var tt = setInterval(scrollimg, speed);
 $img.hover(function() {
 clearInterval(tt);
 }, function() {
 tt = setInterval(scrollimg, speed);
 });
 
 });
 };
 $.fn.scroll3d.defaults = {
 speed: 25,
 radius: 300,
 width: 200,
 height: 150,
 direction: &#39;left&#39;
 }
 })(jQuery);

En HTML, il vous suffit d'avoir un DIV contenant l'image dont vous avez besoin pour obtenir cet effet. Par exemple :

<div class="holder" style="width:550px;height:300px;position:relative;">
 <img  src="img/1.jpg" / alt="jQuery crée un effet de rotation d'image" >
 <img  src="img/2.jpg" / alt="jQuery crée un effet de rotation d'image" >
 <img  src="img/3.jpg" / alt="jQuery crée un effet de rotation d'image" >
 <img  src="img/1.jpg" / alt="jQuery crée un effet de rotation d'image" >
 <img  src="img/2.jpg" / alt="jQuery crée un effet de rotation d'image" >
 </div>

L'appel de code peut s'écrire comme ceci :

$('.holder').scroll3d();

L'écriture est un peu brouillonne, J'espère que tu pourras me pardonner !

Ce qui précède est l'intégralité du contenu de cet article. J'espère que le contenu de cet article pourra apporter de l'aide à l'étude ou au travail de chacun. J'espère également soutenir le site Web PHP chinois !

Pour plus d'articles liés à la création d'effets de rotation d'image par jQuery, veuillez faire attention au site Web PHP chinois !