jQuery と HTML5 を使用して、携帯電話を振ることで着替える特殊効果を実現する方法

私たちは近くにいる人を見つけるために WeChat をよく使用します。これは、アプリ上で電話を振ることで実現されます。現在、このテクノロジーをモバイル Web に移行し、必要な友人全員が参照できるようにしました。

携帯電話を振ることは、賞品を獲得するために振る、曲を検索するために振るなど、さまざまなシナリオで使用できます。今回はHTML5+PHP+jQueryを使って、携帯電話を振ることで着せ替え効果を実現する方法を紹介します。

これは WEB 知識の包括的な応用に関する記事であることに注意してください。この記事を読む前提条件として、HTML5、jQuery、PHP、MySQL およびその他の関連側面の基本的な知識が必要です。

HTML

マイページにはデフォルトで商品情報（特定ブランドのドレスの商品写真と説明文）が表示されています もちろん、実際のアプリケーションではデータベースから商品情報を取得することも可能です。

 <p id="pro" rel="1"> 
 <p>使劲晃动您的手机</p> 
 <img src="images/z1.jpg" width="300" height="300"> 
 <p>灰色</p> 
</p>

次に、ページに jQuery ライブラリ ファイルをロードし、前の記事「HTML5 を使用して揺れ機能を実装するチュートリアル」で使用した電話の揺れを聞くためのコードを引き続き使用します。電話」：shake.js。

 <script src="jquery.js"></script> 
<script src="shake.js"></script>

jQuery

揺れが発生すると、shake.js を使用して、関数 shakeEventDidOccur() を呼び出し、バックグラウンド プロダクトに Ajax リクエストを送信します。バックグラウンド プログラムは、送信されたリクエスト パラメータに基づいて応答し、対応する JSON データを返します。返送されたデータをもとに該当商品の写真や文字情報を表示し、着せ替え効果を実現します。

 window.onload = function() { 
 var myShakeEvent = new Shake({ 
  threshold: 15 
 }); 
 
 myShakeEvent.start(); 
 
 window.addEventListener('shake', shakeEventDidOccur, false); 
 
 function shakeEventDidOccur () { 
  var pro_id = $("#pro").attr("rel"); 
  $.getJSON("product.php?id="+pro_id,function(json){ 
   if(json.msg==1){ 
    $("#pro").attr("rel",json.pro.id) 
    .html(&#39;<img src="images/&#39;+json.pro.pic+&#39;" width="300" height="300"><p>&#39;+json.pro.color+&#39;</p>&#39;); 
   }else{ 
    alert(json.msg); 
   } 
  }); 
 } 
};

PHP

バックグラウンドのproduct.phpは、ajaxによって送信されたパラメータIDに従って現在のIDを除くデータベース内のデータ情報をクエリし、対応するデータセットの結果を取得し、ランダムに選択しますデータからのデータ 一連のデータを一元的に取得し (一度に 1 つのデータ情報のみが表示されるため)、それを JSON 形式でフロントエンド呼び出しに返します。コードを参照してください:

 <?php 
//连接数据库 
include_once("connect.php"); 
 
$id = intval($_GET[&#39;id&#39;]); 
if($id==0) exit; 
//查询数据 
$query = mysql_query("select * from dress where id!=&#39;$id&#39;"); 
$total = mysql_num_rows($query); 
$arr = array(); 
if($total==0){ 
 $arr[&#39;msg&#39;] = &#39;没有足够的衣服！&#39;; 
}else{ 
 $arr[&#39;msg&#39;] = 1; 
 while($row=mysql_fetch_array($query)){ 
  $pros[] = array( 
   &#39;id&#39; => $row[&#39;id&#39;], 
   &#39;color&#39; => $row[&#39;color&#39;], 
   &#39;pic&#39; => $row[&#39;pic&#39;] 
  ); 
 } 
 //随机取一组数据 
 $arr[&#39;pro&#39;] = $pros[array_rand($pros)]; 
} 
//输出JSON格式数据 
echo json_encode($arr); 
?>

。

もちろん、この記事は単なるサンプル アプリケーションであり、開発中に PHP プログラム コードを最適化し、プロジェクトに合った高品質の PHP コードを作成し、最終的に mysql データ テーブル構造を提供することができます。

 CREATE TABLE IF NOT EXISTS `dress` ( 
 `id` int(11) NOT NULL AUTO_INCREMENT, 
 `color` varchar(30) NOT NULL, 
 `pic` varchar(30) NOT NULL, 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ; 
 
INSERT INTO `dress` (`id`, `color`, `pic`) VALUES 
(1, '灰色', 'z1.jpg'), 
(2, '紫色', 'z2.jpg'), 
(3, '红色', 'z3.jpg'), 
(4, '蓝色', 'z4.jpg');

上記はこの記事の全内容です。皆様の学習に役立つことを願っています。その他の関連コンテンツは、PHP 中国語 Web サイトにご注意ください。

関連する推奨事項:

主要ブラウザと互換性のあるプレーヤーの分析のhtml5実装

HTML割引計算価格の実装原理とスクリプトコード

以上がjQuery と HTML5 を使用して、携帯電話を振ることで着替える特殊効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。