常常我們玩微信都會用到查到附近的人,都是在app上實現手機搖一搖的功能。現在,我們將此技術搬移到手機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(),向後台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="images/'+json.pro.pic+'" width="300" height="300"><p>'+json.pro.color+'</p>'); }else{ alert(json.msg); } }); } };
PHP
#後台product.php根據接收ajax提交過來的參數id ,查詢資料庫中除當前id以外的資料信息,獲取到相應的資料集結果,然後隨機從資料集中取出一組資料(因為每次只展示一條資料資訊),以JSON格式傳回給前端調用,請看程式碼:
<?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); ?>
當然本文只是一個實例應用,開發中你可以根據實際應用優化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中文網!
相關推薦:
#
以上是如何使用jQuery和HTML5實現手機搖一搖的換衣特效的詳細內容。更多資訊請關注PHP中文網其他相關文章!