suchen

Heim  >  Artikel  >  Web-Frontend  >  jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems

jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems

高洛峰
高洛峰Original
2017-02-04 09:26:381220Durchsuche

Dieser Artikel beschreibt das Beispiel von jquery, das den Bildwechseleffekt des LED-Werbetafel-Rotationssystems realisiert, und teilt es als Referenz mit allen. Die Details sind wie folgt:
js simuliert den Wechseleffekt von Werbung auf einem riesigen Bildschirm am Straßenrand. Ich bin überzeugt, dass js das kann, und es hat einen realistischen Effekt, der einen sprachlos macht.
Der Bildwechseleffekt auf dem LED-Werbedisplay ähnelt der Szene. Der Effekt ist so schockierend, dass ich fassungslos war. Wenn Sie Spezialeffekte lieben, sollten Sie ihn sich nicht entgehen lassen.
Operationsrendering:

jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems

Tipps: Wenn der Browser nicht normal läuft, können Sie versuchen, den Browsermodus zu wechseln.
Der mit Ihnen geteilte Code für die JQuery-Implementierung des Bildwechseleffekts des LED-Werbetafel-Rotationssystems lautet wie folgt 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems</title>
<link rel="stylesheet" href="css/lanrenzhijia.css" type="text/css" />
</head>
<body>
 <div class="palmtrees"></div>
  <div class="powerline"></div>
  <div class="city"></div>
  <div class="container">
   <div class="ad">
    <div id="ad_1" class="ad_1">
     <img  class="slice_1" src="ads/ad1_slice01.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_2" src="ads/ad1_slice02.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_3" src="ads/ad1_slice03.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_4" src="ads/ad1_slice04.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_5" src="ads/ad1_slice05.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_6" src="ads/ad1_slice06.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_7" src="ads/ad1_slice07.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_8" src="ads/ad1_slice08.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_9" src="ads/ad1_slice09.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_10" src="ads/ad1_slice10.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_11" src="ads/ad1_slice11.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_12" src="ads/ad1_slice12.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_13" src="ads/ad1_slice13.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_14" src="ads/ad1_slice14.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_15" src="ads/ad1_slice15.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_16" src="ads/ad1_slice16.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_17" src="ads/ad1_slice17.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_18" src="ads/ad1_slice18.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_19" src="ads/ad1_slice19.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_20" src="ads/ad1_slice20.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_21" src="ads/ad1_slice21.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_22" src="ads/ad1_slice22.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
    </div>
    <div id="ad_2" class="ad_2">
     <img  class="slice_1" src="ads/ad2_slice01.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_2" src="ads/ad2_slice02.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_3" src="ads/ad2_slice03.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_4" src="ads/ad2_slice04.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_5" src="ads/ad2_slice05.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_6" src="ads/ad2_slice06.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_7" src="ads/ad2_slice07.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_8" src="ads/ad2_slice08.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_9" src="ads/ad2_slice09.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_10" src="ads/ad2_slice10.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_11" src="ads/ad2_slice11.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_12" src="ads/ad2_slice12.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_13" src="ads/ad2_slice13.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_14" src="ads/ad2_slice14.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_15" src="ads/ad2_slice15.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_16" src="ads/ad2_slice16.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_17" src="ads/ad2_slice17.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_18" src="ads/ad2_slice18.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_19" src="ads/ad2_slice19.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_20" src="ads/ad2_slice20.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_21" src="ads/ad2_slice21.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_22" src="ads/ad2_slice22.jpg"/ alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
    </div>
   </div>
  </div>
  <div class="billboard"></div>
  <script src="js/jquery-1.3.2.js" type="text/javascript"></script>
  <script>
$(function() {   
 $(&#39;#ad_1 > img&#39;).each(function(i,e){
  rotate($(this),500,3000,i);
 });
 function rotate(elem1,speed,timeout,i){
  elem1.animate({&#39;marginLeft&#39;:&#39;18px&#39;,&#39;width&#39;:&#39;0px&#39;},speed,function(){
   var other;
   if(elem1.parent().attr(&#39;id&#39;) == &#39;ad_1&#39;)
    other = $(&#39;#ad_2&#39;).children(&#39;img&#39;).eq(i);
   else
    other = $(&#39;#ad_1&#39;).children(&#39;img&#39;).eq(i);
    other.animate({&#39;marginLeft&#39;:&#39;0px&#39;,&#39;width&#39;:&#39;35px&#39;},speed,function(){
    var f = function() { rotate(other,speed,timeout,i) };
    setTimeout(f,timeout);
   });
  });
 }
});
  </script>
</body>
</html>

Oben ist der JQuery-Implementierungscode für den gemeinsam genutzten Bildwechseleffekt des LED-Werbetafel-Rotationssystems mit dir. Ich hoffe es gefällt dir.

Weitere JQuery-bezogene Artikel zur Realisierung des Bildwechseleffekts des LED-Werbetafel-Rotationssystems finden Sie auf der chinesischen PHP-Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Realisieren Sie eine 360-Grad-Rotation von Produktbildern basierend auf dem jQuery Circlr-Plug-inNächster Artikel：Realisieren Sie eine 360-Grad-Rotation von Produktbildern basierend auf dem jQuery Circlr-Plug-in

In Verbindung stehende Artikel

Mehr sehen