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

jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems

高洛峰
Freigeben: 2017-02-04 09:26:38
Original
1246 Leute haben es durchsucht

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage