JQUERY+HTML5 realize mobile phone shake change special effects _jquery

Mobile phone shake can be applied to a lot of scenes, such as shaking a lottery draw, shaking a wave search songs and so on. This article I will introduce you how to use Html5+php+jquery to achieve a mobile phone shake the effect of changing clothes.

Note that this is a comprehensive application of Web knowledge article, read the premise of this article, you need to have html5,jquery,php,mysql and other related aspects of the basic knowledge.

Html

My page defaults to display product information (a brand dress product picture and text description), of course, the actual application can obtain product information from the database.

 
<div id= "Pro" rel= "1" > 
 <p> straining your phone </p> 
  
 <p> grey </p> 
</div> 

And then load the jquery library file in the page, and we continue to use the previous article: "Use HTML5 to achieve the function of mobile phone shake" in the listening phone shaking code: Shake.js.

 
<script src= "Jquery.js" ></script> 
<script src= "Shake.js" ></script> 

Jquery

We use Shake.js to detect the user's mobile phone shaking, call the function shakeeventdidoccur () when the wobble occurs, send an AJAX request to the background product.php, and the daemon returns the corresponding JSON data based on the request parameters submitted. We display the corresponding product picture and text information according to the returned data, realize 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 (' <p> ' +json.pro.color+ "</p > '); 
   else{ 
    alert (json.msg);}} 
  ); 
 } 
; 

Php

Background product.php based on the parameter ID received by the AJAX. Query the database for data information other than the current ID, get the corresponding dataset results, and then randomly fetch a set of data from the dataset (because only one piece of data is displayed at a time), and return to the front-end call in JSON format, see Code:

 
<?php 
//Connection Database 
include_once ("connect.php"); 
 
$id = Intval ($_get[' id ')); 
if ($id ==0) exit; 
Query data 
$query = mysql_query ("Select * from dress where id!= ' $id '"); 
$total = mysql_num_rows ($query); 
$arr = Array (); 
if ($total ==0) { 
 $arr [' msg '] = ' Not enough clothes! '; 
} else{ 
 $arr [' msg '] = 1; 
 while ($row =mysql_fetch_array ($query)) { 
  $pros [] = Array ( 
   ' id ' => $row [' id '], 
   ' color ' => $row [' Color '], 
   ' pic ' => $row [' pic ']] 
  ; 
 } 
 Randomly fetching a set of data 
 $arr [' pro '] = $pros [Array_rand ($pros)]; 
} 
Output JSON format Data 
echo Json_encode ($arr); 
? > 

Of course this article is only an example application, development you can optimize the PHP program code according to the actual application, build the high-quality PHP code that accords with your project, and finally serve the MySQL datasheet structure:

 
CREATE TABLE IF not EXISTS ' dress ' ( 
 ' id ' int (one) not null auto_increment, 
 ' color ' varchar ' is not NULL, 
 ' pic ' varchar () not NULL, 
 PRIMARY KEY (' id ') 
) Engine=myisam DEFAULT Charset=utf8 auto_increment=5; 
 
INSERT into ' dress ' (' id ', ' color ', ' pic ') VALUES 
(1, ' grey ', ' z1.jpg '), 
(2, ' Purple ', ' z2.jpg '), 
(3, ' Red ', ' z3.jpg ') ), 

The above mentioned is the entire content of this article, I hope you can enjoy.