So erzielen Sie mit jQuery und HTML5 den besonderen Effekt, sich durch Schütteln Ihres Telefons umzuziehen

Wir nutzen WeChat oft, um Personen in der Nähe zu finden, was durch Schütteln des Telefons in der App erreicht wird. Jetzt haben wir diese Technologie ins mobile Web verlagert, damit alle Freunde in Not darauf zugreifen können.

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 zeige ich Ihnen, wie Sie mit HTML5+PHP+jQuery den Effekt eines Umziehens durch Schütteln Ihres Mobiltelefons erzielen.

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

Auf meiner Seite werden standardmäßig Produktinformationen (Bilder einer bestimmten Marke von Kleiderprodukten und Textbeschreibungen) angezeigt Anwendungen können aus der Datenbank abgerufen werden. Produktinformationen abrufen.

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

Laden Sie dann die jQuery-Bibliotheksdatei auf die Seite und verwenden Sie weiterhin den vorherigen Artikel: „Verwenden Sie HTML5, um die Funktion des Schüttelns zu implementieren.“ das Telefon Der im Tutorial verwendete Code, um das Zittern des Telefons zu hören: shake.js.

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

jQuery

Wir verwenden shake.js, um zu erkennen, dass das Telefon des Benutzers ist Beim Schütteln wird die Funktion shakeEventDidOccur() aufgerufen, um eine Ajax-Anfrage an den Hintergrund zu senden. Das Hintergrundprogramm gibt die entsprechenden JSON-Daten basierend auf den übermittelten Anfrageparametern zurück. 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(&#39;<img src="images/&#39;+json.pro.pic+&#39;" width="300" height="300"><p>&#39;+json.pro.color+&#39;</p>&#39;); 
   }else{ 
    alert(json.msg); 
   } 
  }); 
 } 
};

PHP

Der Hintergrund „product.php“ erhält die von Ajax übermittelte Parameter-ID Fragen Sie andere Dateninformationen als die aktuelle ID in der Datenbank ab, erhalten Sie die entsprechenden Datensatzergebnisse und entnehmen Sie dann zufällig einen Datensatz aus dem Datensatz (da jeweils nur eine Dateninformation angezeigt wird). Geben Sie es im JSON-Format an den Front-End-Aufruf zurück, siehe Code:

 <?php 
//连接数据库 
include_once("connect.php"); 
 
$id = intval($_GET[&#39;id&#39;]); 
if($id==0) exit; 
//查询数据 
$query = mysql_query("select * from dress where id!=&#39;$id&#39;"); 
$total = mysql_num_rows($query); 
$arr = array(); 
if($total==0){ 
 $arr[&#39;msg&#39;] = &#39;没有足够的衣服！&#39;; 
}else{ 
 $arr[&#39;msg&#39;] = 1; 
 while($row=mysql_fetch_array($query)){ 
  $pros[] = array( 
   &#39;id&#39; => $row[&#39;id&#39;], 
   &#39;color&#39; => $row[&#39;color&#39;], 
   &#39;pic&#39; => $row[&#39;pic&#39;] 
  ); 
 } 
 //随机取一组数据 
 $arr[&#39;pro&#39;] = $pros[array_rand($pros)]; 
} 
//输出JSON格式数据 
echo json_encode($arr); 
?>

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

 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, dass er für alle beim Lernen hilfreich ist. Weitere Informationen finden Sie auf der chinesischen PHP-Website für verwandte Inhalte!

Verwandte Empfehlungen:

HTML5 implementiert die Analyse von Playern, die mit den wichtigsten Browsern kompatibel sind

HTML-Rabattberechnungspreis Implementierungsprinzip und Skript Code

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit jQuery und HTML5 den besonderen Effekt, sich durch Schütteln Ihres Telefons umzuziehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!