ホームページ > 記事 > ウェブフロントエンド > jquery+phpでダイナミックなデジタル表示効果を実現
今回は、動的なデジタル表示効果を実現するための jquery + php を紹介します。 jquery + php を使用して動的なデジタル表示効果を実現するための 注意事項は何ですか。以下は実際的なケースです。
訪問数、ダウンロード数、その他の効果を動的に表示する必要がある場合は、jQuery をバックグラウンド PHP と組み合わせて使用して、ローリング デジタル表示効果を実現できます。 この記事では、商品のダウンロード数をリアルタイムで取得するシナリオを使用しています。フロントデスクはjavascriptを実行して最新のダウンロード数を取得し、ページをスクロールしてダウンロード数を更新します。
HTMLまず、jQuery ライブラリ ファイルとアニメーション バックグラウンド プラグイン: animate
Background-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 を介してバックグラウンドで最新のダウンロード数を取得します。次のコードは、一般的な jQuery ajax リクエストです。data.php、data.php への
post request を介して、処理が成功した後、ダウンロード数を取得します: 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秒执行一次 });同様に、Web サイトの訪問数の統計、Web サイトの訪問数の統計から取得できます。ビデオの再生時間、カウントダウンなど。アプリケーション、バックグラウンド data.php がデータを処理する方法については、この記事の範囲外です。興味のある学生は、data.count を返すカウンターなどのバックグラウンド プログラムを作成できます。 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:
jQuery アニメーション効果の画像カルーセルの実装 (コード付き)
以上がjquery+phpでダイナミックなデジタル表示効果を実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。