HTML5 and Php+jquery mobile phone shake the effect of changing clothes

In the previous article, we used HTML5 to detect mobile phone shaking to achieve the effect of shaking. 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> shaking your cell phone </p>

<p> Grey </p>
</div>

The jquery library file is then loaded on the page, and we continue to use the previous article: "HTML5 mobile phone gravity and direction sensing application-shake the effect of 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
Connecting to a database
Include_once ("connect.php");

$id = Intval ($_get[' id '));
if ($id ==0) exit;
Querying 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 take 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 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, ' Gray ', ' z1.jpg '),
(2, ' Purple ', ' z2.jpg '),
(3, ' Red ', ' z3.jpg '),
(4, ' Blue ', ' z4.jpg ');