ホームページ > 記事 > ウェブフロントエンド > jQuery と HTML5 を使用して、携帯電話を振ることで着替える特殊効果を実現する方法

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

不言オリジナル: 2018-06-11 17:47:322002ブラウズ

私たちは近くにいる人を見つけるために 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(&#39;shake&#39;, 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, &#39;灰色&#39;, &#39;z1.jpg&#39;), 
(2, &#39;紫色&#39;, &#39;z2.jpg&#39;), 
(3, &#39;红色&#39;, &#39;z3.jpg&#39;), 
(4, &#39;蓝色&#39;, &#39;z4.jpg&#39;);

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

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

関連記事