jQuery erzeugt einen Bildrotationseffekt

Ich habe zuvor JQuery verwendet, um einen Bildrotationseffekt in Tiefenrichtung zu schreiben. Ich werde ihn hier mit Ihnen teilen und ein Bild einfügen, um zu sehen, wie der Effekt aussieht:

Das Implementierungsprinzip ist nicht kompliziert. In der Mathematik wird nur die Sinusfunktion verwendet. Der Herstellungsprozess ist ungefähr wie folgt:

(1) Definieren Sie zunächst den Radius der Bilddrehung

( 2) Der Prozess der Bildrotation erfordert die Verwendung der setInterval()-Methode, um den Winkel der Position jedes Bildes zu erhalten. Der Winkel ändert sich allmählich mit der Zeit

(3) Gemäß einer mathematischen Formel: x=R* SIN(deg) kann die Position des Bildes in X-Richtung ermitteln

(4) Die Transparenzeinstellung basiert tatsächlich auf dem Winkel, wenn das Bild gedreht wird. Die Anfangseinstellung ist 0 Grad, wenn sich das Bild direkt im Vordergrund befindet. Wenn der Bilddrehwinkel größer als 0 Grad

und kleiner als 180 Grad ist, ändert sich die Transparenz des Bildes Hier wird eine kleine Berechnungsformel hinzugefügt, um sicherzustellen, dass das Bild bei 180 Grad vollständig transparent ist. Der Code wird unten angezeigt.

(5) Die Skalierung des Bildes basiert auch auf dem Drehwinkel des Bildes, was meiner Meinung nach leicht zu verstehen ist.

(6) Nachdem Sie die X-Achsen-Positionsinformationen, Zoominformationen und Transparenzinformationen des Bildes erhalten haben, ist der nächste Schritt sehr einfach. Zeigen Sie einfach alle Informationen über CSS-Stile an.

Der CSS-Stil wird schrittweise durch die Methode setInterval() geändert.

Werfen wir einen Blick auf den Hauptcode:

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;

Der Thiszindex in der zweiten Zeile ist die Tiefeninformation des Bildes, die ich jedem Bild hinzugefügt habe Das Indexattribut speichert seinen Indexwert und das Bild berechnet den entsprechenden Tiefenwert basierend auf diesen Informationen.

Die Deckkraft in der dritten Zeile ist die Transparenzinformation des Bildes.

Jedes Bild erhält den folgenden CSS-Stil:

$(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
  });

Die Deckkraft in der fünften Zeile verwendet eine einfache Formel, um es auf der tiefsten Ebene unsichtbar zu machen. Was vollständige Transparenz angeht.

In Bezug auf die Funktion habe ich die Funktion zum Drehen nach links und rechts hinzugefügt. Das Prinzip besteht darin, die positiven und negativen Werte der X-Achsen-Informationen des Bildes umzuwandeln :

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);
  }

Benutzer können die Parameter im gesamten Effekt anpassen:

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

Der vollständige Code des Effekts ist unten beigefügt :

(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);

In HTML benötigen Sie nur ein DIV, das das Bild enthält, das Sie benötigen, um diesen Effekt zu erzielen >

<div class="holder" style="width:550px;height:300px;position:relative;">
 <img  src="/static/imghw/default1.png"  data-src="img/1.jpg"  class="lazy"   / alt="jQuery erzeugt einen Bildrotationseffekt" >
 <img  src="/static/imghw/default1.png"  data-src="img/2.jpg"  class="lazy"   / alt="jQuery erzeugt einen Bildrotationseffekt" >
 <img  src="/static/imghw/default1.png"  data-src="img/3.jpg"  class="lazy"   / alt="jQuery erzeugt einen Bildrotationseffekt" >
 <img  src="/static/imghw/default1.png"  data-src="img/1.jpg"  class="lazy"   / alt="jQuery erzeugt einen Bildrotationseffekt" >
 <img  src="/static/imghw/default1.png"  data-src="img/2.jpg"  class="lazy"   / alt="jQuery erzeugt einen Bildrotationseffekt" >
 </div>

Der Codeaufruf kann wie folgt geschrieben werden:

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

Das Schreiben ist etwas chaotisch, Ich hoffe, du kannst mir verzeihen!

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels jedem beim Lernen oder Arbeiten helfen kann. Ich hoffe auch, die PHP-Chinese-Website zu unterstützen.

Weitere Artikel zum Erstellen von Bildrotationseffekten mit jQuery finden Sie auf der chinesischen PHP-Website!