jQuery HTML5 réalise l'effet spécial de secouer le téléphone portable pour changer de vêtements_jquery

Secouer votre téléphone peut être utilisé dans de nombreux scénarios, comme secouer pour gagner des prix, secouer pour rechercher des chansons, etc. Dans cet article, je vais vous présenter comment utiliser HTML5 PHP jQuery pour obtenir l'effet de changer de vêtements en secouant votre téléphone portable.

Notez qu'il s'agit d'un article sur l'application complète des connaissances WEB. La condition préalable pour lire cet article est que vous devez avoir des connaissances de base en HTML5, jQuery, PHP, MySQL et d'autres aspects connexes.

HTML

Les informations sur le produit (images de produits et descriptions textuelles d'une certaine marque de robe) sont affichées par défaut sur ma page. Bien entendu, dans les applications réelles, les informations sur les produits peuvent être obtenues à partir de la base de données.

 
<div id="pro" rel="1"> 
 <p>使劲晃动您的手机</p> 
 <img src="images/z1.jpg" width="300" height="300"> 
 <p>灰色</p> 
</div> 

Chargez ensuite le fichier de la bibliothèque jQuery dans la page. En parallèle, nous continuons à utiliser le code utilisé dans l'article précédent : "Tutoriel pour implémenter la fonction de secouer le téléphone avec HTML5" : shake.js.

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

jQuery

Nous utilisons shake.js pour détecter le tremblement du téléphone mobile de l'utilisateur. Lorsque le tremblement se produit, nous appelons la fonction shakeEventDidOccur() et envoyons une requête Ajax en arrière-plan product.php. Le programme en arrière-plan renverra le JSON correspondant. données en fonction des paramètres de la demande soumise. Nous affichons les images du produit correspondantes et les informations textuelles en fonction des données renvoyées pour obtenir l'effet de changer de vêtements.

 
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

Sur la base de la réception de l'identifiant du paramètre soumis par ajax, le backend product.php interroge la base de données pour obtenir des informations sur les données autres que l'identifiant actuel, obtient les résultats de l'ensemble de données correspondant, puis extrait aléatoirement un ensemble de données de l'ensemble de données. (car à chaque fois il n'est affiché qu'une information de données), renvoyé à l'appel front-end au format JSON, veuillez consulter le 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;> 

Bien sûr, cet article n'est qu'un exemple d'application.Pendant le développement, vous pouvez optimiser le code du programme PHP en fonction de l'application réelle, créer du code PHP de haute qualité adapté à votre projet, et enfin fournir la structure de la table de données 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'); 

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.