jQuery HTML5 menyedari kesan khas menggoncang telefon bimbit untuk menukar clothes_jquery

Gegar telefon anda boleh digunakan dalam banyak senario, seperti goncang untuk memenangi hadiah, goncang untuk mencari lagu, dsb. Dalam artikel ini, saya akan memperkenalkan kepada anda cara menggunakan HTML5 PHP jQuery untuk mencapai kesan menukar pakaian dengan menggoncang telefon bimbit anda.

Perhatikan bahawa ini adalah artikel tentang aplikasi komprehensif pengetahuan WEB Prasyarat untuk membaca artikel ini ialah anda perlu mempunyai pengetahuan asas HTML5, jQuery, PHP, MySQL dan aspek lain yang berkaitan.

HTML

Maklumat produk (gambar produk dan penerangan teks jenama pakaian tertentu) dipaparkan pada halaman saya secara lalai Sudah tentu, dalam aplikasi sebenar, maklumat produk boleh diperolehi daripada pangkalan data.

 
<div id="pro" rel="1"> 
 <p>使劲晃动您的手机</p> 
 <img  src="/static/imghwm/default1.png"  data-src="images/z1.jpg"  class="lazy"    style="max-width:90%"  style="max-width:90%" alt="jQuery HTML5 menyedari kesan khas menggoncang telefon bimbit untuk menukar clothes_jquery" > 
 <p>灰色</p> 
</div> 

Kemudian muatkan fail perpustakaan jQuery dalam halaman Pada masa yang sama, kami terus menggunakan kod yang digunakan dalam artikel sebelumnya: " Tutorial untuk melaksanakan fungsi menggoncang telefon dengan HTML5" : shake.js.

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

jQuery

Kami menggunakan shake.js untuk mengesan gegaran telefon mudah alih pengguna Apabila goncangan berlaku, kami memanggil fungsi shakeEventDidOccur() dan menghantar permintaan Ajax ke produk latar belakang.php yang sepadan data mengikut parameter permintaan yang dikemukakan. Kami memaparkan gambar produk dan maklumat teks yang sepadan berdasarkan data yang dikembalikan untuk mencapai kesan menukar pakaian.

 
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="/static/imghwm/default1.png"  data-src="images/'+json.pro.pic+'"  class="lazy"+json.pro.pic+'"    style="max-width:90%"  style="max-width:90%" alt="jQuery HTML5 menyedari kesan khas menggoncang telefon bimbit untuk menukar clothes_jquery" ><p>'+json.pro.color+'</p>'); 
   }else{ 
    alert(json.msg); 
   } 
  }); 
 } 
}; 

PHP

Berdasarkan penerimaan id parameter yang diserahkan oleh ajax, backend product.php menanyakan pangkalan data untuk maklumat data selain daripada id semasa, memperoleh hasil set data yang sepadan dan kemudian mengeluarkan set data secara rawak daripada set data (kerana setiap kali ia hanya dipaparkan Sekeping maklumat data), dikembalikan ke panggilan hadapan dalam format JSON, sila lihat kod:

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

Sudah tentu, artikel ini hanyalah contoh aplikasi Semasa pembangunan, anda boleh mengoptimumkan kod program PHP mengikut aplikasi sebenar, mencipta kod PHP berkualiti tinggi yang sesuai dengan projek anda, dan akhirnya menyediakan struktur jadual data 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'); 

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.