찾다

집  >  기사  >  웹 프론트엔드  >  jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다.

jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다.

高洛峰
高洛峰원래의
2017-02-04 09:26:381213검색

이 글은 LED 광고판 회전 시스템의 이미지 전환 효과를 구현한 jquery의 예시를 설명하고, 참고용으로 여러분과 공유합니다. 자세한 내용은 다음과 같습니다.
js는 길가에 있는 거대한 디스플레이 화면에 광고가 전환되는 효과를 시뮬레이션합니다. js가 이를 할 수 있다고 믿어야 하며, 말문이 막힐 정도로 현실적인 효과를 제공합니다.
LED 광고 디스플레이의 사진 전환 효과가 장면과 비슷해서 깜짝 놀랐습니다. 특수 효과를 좋아한다면 놓치지 마세요!
작업 렌더링:

jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다.

팁: 브라우저가 정상적으로 실행되지 않으면 브라우징 모드를 전환해 보세요.
LED 광고판 회전 시스템의 이미지 전환 효과를 구현하기 위한 jquery 코드는 다음과 같습니다. 

<!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는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다.</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는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_2" src="ads/ad1_slice02.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_3" src="ads/ad1_slice03.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_4" src="ads/ad1_slice04.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_5" src="ads/ad1_slice05.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_6" src="ads/ad1_slice06.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_7" src="ads/ad1_slice07.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_8" src="ads/ad1_slice08.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_9" src="ads/ad1_slice09.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_10" src="ads/ad1_slice10.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_11" src="ads/ad1_slice11.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_12" src="ads/ad1_slice12.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_13" src="ads/ad1_slice13.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_14" src="ads/ad1_slice14.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_15" src="ads/ad1_slice15.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_16" src="ads/ad1_slice16.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_17" src="ads/ad1_slice17.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_18" src="ads/ad1_slice18.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_19" src="ads/ad1_slice19.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_20" src="ads/ad1_slice20.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_21" src="ads/ad1_slice21.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_22" src="ads/ad1_slice22.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
    </div>
    <div id="ad_2" class="ad_2">
     <img  class="slice_1" src="ads/ad2_slice01.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_2" src="ads/ad2_slice02.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_3" src="ads/ad2_slice03.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_4" src="ads/ad2_slice04.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_5" src="ads/ad2_slice05.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_6" src="ads/ad2_slice06.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_7" src="ads/ad2_slice07.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_8" src="ads/ad2_slice08.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_9" src="ads/ad2_slice09.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_10" src="ads/ad2_slice10.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_11" src="ads/ad2_slice11.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_12" src="ads/ad2_slice12.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_13" src="ads/ad2_slice13.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_14" src="ads/ad2_slice14.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_15" src="ads/ad2_slice15.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_16" src="ads/ad2_slice16.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_17" src="ads/ad2_slice17.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_18" src="ads/ad2_slice18.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_19" src="ads/ad2_slice19.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_20" src="ads/ad2_slice20.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_21" src="ads/ad2_slice21.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
     <img  class="slice_22" src="ads/ad2_slice22.jpg"/ alt="jquery는 LED 광고판 회전 시스템의 이미지 전환 효과를 구현합니다." >
    </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>

위는 LED 광고판 회전 시스템의 화면 전환 효과를 구현하기 위한 jquery 코드입니다. .

LED 광고판 회전 시스템의 이미지 전환 효과 구현에 대한 더 많은 jquery 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：jQuery Circlr 플러그인을 기반으로 제품 이미지의 360도 회전을 구현합니다.다음 기사：jQuery Circlr 플러그인을 기반으로 제품 이미지의 360도 회전을 구현합니다.

관련 기사

더보기