집 > 기사 > 웹 프론트엔드 > jquery+php는 동적 디지털 디스플레이 효과를 실현합니다.

jquery+php는 동적 디지털 디스플레이 효과를 실현합니다.

php中世界最好的语言원래의: 2018-04-24 11:24:031963검색

이번에는 동적 디지털 디스플레이 효과를 얻기 위해 jquery+php를 가져오겠습니다. jquery+php를 사용하여 동적 디지털 디스플레이 효과를 얻기 위한 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

때로는 방문 수, 다운로드 수 및 기타 효과를 동적으로 표시해야 할 때가 있습니다. jQuery를 배경 PHP와 결합하여 롤링 디지털 디스플레이 효과를 얻을 수 있습니다.

이 문서에서는 프런트 데스크에서 정기적으로 javascript를 실행하여 최신 다운로드 횟수를 얻고 스크롤하여 페이지의 다운로드 횟수를 업데이트하는 시나리오를 사용합니다.
HTML
먼저 jQuery 라이브러리 파일과 애니메이션 배경 플러그인인 animateBackground-plugin.js를 로드합니다.

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/animateBackground-plugin.js"></script>

그런 다음 html 요소를 추가하여 페이지의 적절한 위치에 디지털 스크롤 효과를 표시합니다.

<p id="total"> 
  下载量：<span class="t_num"></span>次 
</p>

jQuery
먼저 동적 롤링 넘버를 구현하는 데 사용되는 show_num() 함수를 작성합니다. 통계 숫자 n을 개별 숫자로 분할하고 이 숫자를 로 묶고 플러그인 backgroundPosition을 호출하여 해당 숫자에 이미지가 배치됩니다.

function show_num(n){ 
  var it = $(".t_num i"); 
  var len = String(n).length; 
  for(var i=0;i<len;i++){ 
    if(it.length<=i){ 
      $(".t_num").append("<i></i>"); 
    } 
    var num=String(n).charAt(i); 
    var y = -parseInt(num)*30; //y轴位置 
    var obj = $(".t_num i").eq(i); 
    obj.animate({ //滚动动画 
      backgroundPosition :'(0 '+String(y)+'px)' 
      }, 'slow','swing',function(){} 
    ); 
  } 
}

다음으로 ajax를 통해 백그라운드에서 최신 다운로드 횟수를 가져옵니다. 다음 코드는 data.php, data.php에 대한 post 요청을 통해 또는 성공적인 처리 후 다운로드 수를 가져오는 일반적인 jQuery ajax 요청입니다. show_num()을 사용하여 숫자를 스크롤합니다.

function getdata(){ 
  $.ajax({ 
    url: 'data.php', 
    type: 'POST', 
    dataType: "json", 
    cache: false, 
    timeout: 10000, 
    error: function(){}, 
    success: function(data){ 
      show_num(data.count); 
    } 
    }); 
}

마지막으로 페이지가 로드된 후 데이터를 초기화한 다음 3초마다 ajax 요청을 실행하여 다운로드 수를 업데이트해야 합니다.

$(function(){ 
  getdata(); 
  setInterval('getdata()', 3000);//每隔3秒执行一次 
});

마지막으로 웹사이트 방문 통계, 비디오 재생 시간, 카운트다운 등 애플리케이션, 백그라운드 data.php가 데이터를 처리하는 방법은 이 기사의 범위를 벗어납니다. 관심 있는 학생들은 data.count를 반환하는 카운터와 같은 백그라운드 프로그램을 작성할 수 있습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!