jquery php はスクロールデジタル効果を実装します

jquery php はスクロールデジタル効果を実装します_jquery

WBOY

リリース： 2016-05-16 15:29:09

オリジナル

2597 人が閲覧しました

訪問数、ダウンロード数、その他の効果を動的に表示する必要がある場合は、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 要素を追加して、ページ上の適切な位置にデジタルスクロール効果を表示します。

<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 に post リクエストを送信するか、処理が成功した後にダウンロード数を取得し、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秒执行一次 
});

ログイン後にコピー

同様に、Web サイトの訪問数、ビデオの再生時間、カウントダウンなどの統計にも使用できます。バックエンド data.php がデータを処理する方法については、この記事の範囲を超えていますので、興味のある学生はこのようなバックエンドを作成できます。 data.countを返すプログラムとして。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。