집 > 기사 > 웹 프론트엔드 > jQuery와 HTML5를 사용하여 휴대폰을 흔들어 옷을 갈아입는 특수 효과를 얻는 방법

jQuery와 HTML5를 사용하여 휴대폰을 흔들어 옷을 갈아입는 특수 효과를 얻는 방법

不言원래의: 2018-06-11 17:47:322081검색

우리는 종종 WeChat을 사용하여 근처에 있는 사람을 찾습니다. 이는 앱에서 전화를 흔들어 달성됩니다. 이제 우리는 이 기술을 모두가 배울 수 있도록 모바일 웹으로 옮겼습니다.

휴대폰을 흔드는 것은 흔들어서 복권 추첨을 변경하거나 흔들어서 노래를 검색하는 등 다양한 시나리오에서 사용할 수 있습니다. 이번 글에서는 HTML5+PHP+jQuery를 사용하여 휴대폰을 흔들어 옷을 갈아입는 효과를 얻는 방법을 소개하겠습니다.

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

HTML

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

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

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

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

jQuery

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

 window.onload = function() { 
 var myShakeEvent = new Shake({ 
  threshold: 15 
 }); 
 
 myShakeEvent.start(); 
 
 window.addEventListener(&#39;shake&#39;, 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

백그라운드 product.php는 ajax에서 제출한 매개변수 id에 따라 현재 id를 제외한 데이터베이스의 데이터 정보를 조회하고 해당 데이터 세트 결과를 얻은 후 무작위로 선택합니다. 데이터의 데이터 데이터 세트를 중앙에서 검색하고(한 번에 하나의 데이터 정보만 표시되므로) JSON 형식으로 프런트 엔드 호출에 반환합니다. 코드는

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

입니다.

물론 이 글은 단지 예시 애플리케이션일 뿐입니다. 개발 중에 실제 애플리케이션에 따라 사용할 수 있으며, 프로젝트에 적합한 고품질 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, &#39;灰色&#39;, &#39;z1.jpg&#39;), 
(2, &#39;紫色&#39;, &#39;z2.jpg&#39;), 
(3, &#39;红色&#39;, &#39;z3.jpg&#39;), 
(4, &#39;蓝色&#39;, &#39;z4.jpg&#39;);

이상은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되길 바라며, 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

jQuery와 HTML5를 사용하여 휴대폰을 흔들어 옷을 갈아입는 특수 효과를 얻는 방법

관련 기사