jQuery HTML5 realizes the special effect of shaking the mobile phone to change clothes_jquery

Shaking your phone can be used in many scenarios, such as shaking to win prizes, shaking to search for songs, etc. In this article, I will introduce to you how to use HTML5 PHP jQuery to achieve the effect of changing clothes by shaking your mobile phone.

Note that this is an article about the comprehensive application of WEB knowledge. The prerequisite for reading this article is that you need to have basic knowledge of HTML5, jQuery, PHP, MySQL and other related aspects.

HTML

Product information (product pictures and text descriptions of a certain brand of dress) is displayed on my page by default. Of course, in actual applications, product information can be obtained from the database.

 
<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 realizes the special effect of shaking the mobile phone to change clothes_jquery" > 
 <p>灰色</p> 
</div> 

Then load the jQuery library file in the page. At the same time, we continue to use the code used in the previous article: " Tutorial to implement the function of shaking the phone with HTML5" :shake.js.

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

jQuery

We use shake.js to detect the shake of the user's mobile phone. When the shake occurs, we call the function shakeEventDidOccur() and send an Ajax request to the background product.php. The background program will return the corresponding JSON data according to the submitted request parameters. We display the corresponding product pictures and text information based on the returned data to achieve the effect of changing clothes.

 
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 realizes the special effect of shaking the mobile phone to change clothes_jquery" ><p>'+json.pro.color+'</p>'); 
   }else{ 
    alert(json.msg); 
   } 
  }); 
 } 
}; 

PHP

Based on receiving the parameter id submitted by ajax, the backend product.php queries the database for data information other than the current id, obtains the corresponding data set results, and then randomly takes out a set of data from the data set (because each time it is only displayed A piece of data information), returned to the front-end call in JSON format, please see the code:

 
<&#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;> 

Of course, this article is just an example application. During development, you can optimize the PHP program code according to the actual application, create high-quality PHP code that suits your project, and finally provide the mysql data table structure:

 
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'); 

The above is the entire content of this article, I hope you all like it.