jQuery HTML5 realisiert den besonderen Effekt des Schüttelns des Mobiltelefons, um die Kleidung zu wechseln_jquery

Das Schütteln Ihres Telefons kann in vielen Szenarien verwendet werden, z. B. zum Schütteln, um Preise zu gewinnen, zum Schütteln, um nach Liedern zu suchen usw. In diesem Artikel werde ich Ihnen vorstellen, wie Sie mit HTML5 PHP jQuery den Effekt erzielen, dass Sie durch Schütteln Ihres Mobiltelefons die Kleidung wechseln.

Beachten Sie, dass es sich hierbei um einen Artikel über die umfassende Anwendung von WEB-Kenntnissen handelt. Voraussetzung zum Lesen dieses Artikels ist, dass Sie über Grundkenntnisse in HTML5, jQuery, PHP, MySQL und anderen verwandten Aspekten verfügen.

HTML

Produktinformationen (Produktbilder und Textbeschreibungen einer bestimmten Kleidermarke) werden standardmäßig auf meiner Seite angezeigt. In tatsächlichen Anwendungen können Produktinformationen natürlich aus der Datenbank abgerufen werden.

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

Laden Sie dann die jQuery-Bibliotheksdatei auf die Seite. Gleichzeitig verwenden wir weiterhin den im vorherigen Artikel verwendeten Code: „Tutorial zum Implementieren der Funktion zum Schütteln des Telefons mit HTML5“: shake.js.

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

jQuery

Wir verwenden shake.js, um die Erschütterung des Mobiltelefons des Benutzers zu erkennen, rufen wir die Funktion shakeEventDidOccur() auf und senden eine Ajax-Anfrage an das Hintergrundprogramm Daten gemäß den übermittelten Anfrageparametern. Wir zeigen die entsprechenden Produktbilder und Textinformationen basierend auf den zurückgegebenen Daten an, um den Effekt eines Kleiderwechsels zu erzielen.

 
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

Basierend auf dem Empfang der von Ajax übermittelten Parameter-ID fragt das Backend product.php die Datenbank nach anderen Dateninformationen als der aktuellen ID ab, ruft die entsprechenden Datensatzergebnisse ab und entnimmt dann zufällig einen Datensatz aus dem Datensatz (Da jedes Mal nur eine Dateninformation angezeigt wird), wird sie im JSON-Format an den Front-End-Aufruf zurückgegeben. Bitte sehen Sie sich den Code an:

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

Natürlich handelt es sich bei diesem Artikel nur um eine Beispielanwendung. Während der Entwicklung können Sie den PHP-Programmcode entsprechend der tatsächlichen Anwendung optimieren, hochwertigen PHP-Code erstellen, der zu Ihrem Projekt passt, und schließlich die MySQL-Datentabellenstruktur bereitstellen:

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.