jQuery HTML5는 휴대폰을 흔들어 옷을 갈아입는 특수 효과를 구현합니다_jquery

휴대폰을 흔드는 것은 상품을 얻기 위해 흔들어서, 노래를 검색하기 위해 흔들어서 등 다양한 시나리오에 사용될 수 있습니다. 이 기사에서는 HTML5 PHP jQuery를 사용하여 휴대폰을 흔들어 옷을 갈아입는 효과를 얻는 방법을 소개하겠습니다.

이 글은 WEB 지식의 종합적인 적용에 관한 글이라는 점을 참고하세요. 이 글을 읽기 위한 전제 조건은 HTML5, jQuery, PHP, MySQL 및 기타 관련 측면에 대한 기본 지식이 필요하다는 것입니다.

HTML

마이 페이지에는 기본적으로 제품 정보(특정 브랜드의 드레스에 대한 제품 사진 및 텍스트 설명)가 표시됩니다. 물론, 실제 애플리케이션에서는 제품 정보를 데이터베이스에서 얻을 수 있습니다.

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

그런 다음 페이지에 jQuery 라이브러리 파일을 로드하는 동시에 이전 기사에서 사용한 코드를 계속 사용합니다: " HTML5로 휴대폰 흔들기 기능을 구현하는 튜토리얼": shake.js.

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

jQuery

shake.js를 사용하여 사용자 휴대폰의 흔들림을 감지합니다. 흔들림이 발생하면 shakeEventDidOccur() 함수를 호출하고 Ajax 요청을 백그라운드 product.php로 보냅니다. 백그라운드 프로그램이 해당 JSON을 반환합니다. 제출된 요청 매개변수에 따른 데이터. 반환된 데이터를 기반으로 해당 제품 사진과 텍스트 정보를 표시하여 옷을 갈아입는 효과를 얻습니다.

 
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

백엔드 product.php는 ajax가 제출한 매개변수 id를 수신하여 현재 id가 아닌 데이터 정보를 데이터베이스에 쿼리하고 해당 데이터 세트 결과를 얻은 후 데이터 세트에서 무작위로 데이터 세트를 꺼냅니다. (매번 표시될 때마다 데이터 정보가 표시되기 때문에) JSON 형식으로 프런트엔드 호출로 반환됩니다. 코드를 참조하세요.

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

물론 이 기사는 단지 예시 애플리케이션일 뿐입니다. 개발 중에 실제 애플리케이션에 따라 PHP 프로그램 코드를 최적화하고, 프로젝트에 적합한 고품질 PHP 코드를 생성하고, 마지막으로 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'); 

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.