携帯電話を振って着替える特殊効果をjQuery HTML5で実現_jquery

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

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

HTML

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

 
<div id="pro" rel="1"> 
 <p>使劲晃动您的手机</p> 
 <img  src="/static/imghwm/default1.png"  data-src="images/z1.jpg"  class="lazy"    style="max-width:90%"  style="max-width:90%" alt="携帯電話を振って着替える特殊効果をjQuery HTML5で実現_jquery" > 
 <p>灰色</p> 
</div> 

次に、ページに jQuery ライブラリ ファイルを読み込みます。同時に、前の記事「 HTML5 で電話を振る機能を実装するチュートリアル」で使用したコードを引き続き使用します。シェイク.js。

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

jQuery

ユーザーの携帯電話の揺れを検出するために、shake.js を使用します。揺れが発生すると、関数 shakeEventDidOccur() を呼び出し、バックグラウンドの product.php に 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('<img  src="/static/imghwm/default1.png"  data-src="images/'+json.pro.pic+'"  class="lazy"+json.pro.pic+'"    style="max-width:90%"  style="max-width:90%" alt="携帯電話を振って着替える特殊効果をjQuery HTML5で実現_jquery" ><p>'+json.pro.color+'</p>'); 
   }else{ 
    alert(json.msg); 
   } 
  }); 
 } 
}; 

PHP

バックエンドの product.php は、ajax によって送信されたパラメータ ID の受信に基づいて、現在の ID 以外のデータ情報をデータベースにクエリし、対応するデータセットの結果を取得して、データセットからデータのセットをランダムに取り出します。 (毎回表示されるのはデータ情報の一部だけであるため)、フロントエンド呼び出しに JSON 形式で返されます。コードを参照してください:

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

もちろん、この記事は単なるサンプル アプリケーションであり、開発中に実際のアプリケーションに応じて 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'); 

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。