jquery php는 스크롤링 디지털 효과를 구현합니다_jquery

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

이 기사에서는 제품의 다운로드 횟수를 실시간으로 획득하는 시나리오를 사용합니다. 프런트엔드는 정기적으로 자바스크립트를 실행하여 최신 다운로드 횟수를 얻고 페이지의 다운로드 횟수를 롤링 방식으로 업데이트합니다.
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 요소를 추가합니다.

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

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를 통해 백그라운드에서 최신 다운로드 횟수를 가져옵니다. 다음 코드는 일반적인 jQuery ajax 요청입니다. data.php, data.php에 대한 게시 요청을 수행하거나 성공적인 처리 후 다운로드 수(data.count)를 얻은 다음 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를 반환하는 프로그램입니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.