PHP+jQuery+HTML5手机摇一摇美女换衣

HTML

<div id="pro" rel="1">  
    <p>使劲晃动您的手机</p>  
    <img src="images/z1.jpg" width="300" height="300">  
    <p>穿着红衣的美女</p>  
</div>

jQuery

我们使用shake.js检测到用户手机摇晃，当摇晃发生时调用函数shakeEventDidOccur()，向后台product.php发送Ajax请求，后台程序会根据提交的请求参数返回相应的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);  
            }  
        });  
    }  
};

dress.sql

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