h5移动端网页模仿微信摇一摇代码实现
现在h5可以做到很多跟app一样的功能，接下来我们将通过手机的shake.event事件来实现想要的功能。
通过手机摇一摇 会去数据库查询 是否中奖，并且弹窗出相应的提示。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>摇一摇</title> <meta charset="UTF-8"> <meta content="yes" name="apple-mobile-web-app-capable"></meta> <meta content="black" name="apple-mobile-web-app-status-bar-style"></meta> <meta name="format-detection" content="telephone=no"></meta> <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"></meta> <meta content="yes" name="full-screen"></meta> <meta content="true" name="x5-fullscreen"></meta> <meta content="application" name="browsermode"></meta> <link href="css/shake.css?v=2.7" type="text/css" rel="stylesheet" /> <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script> <script src="js/shake.js?v=0.6.3" type="text/javascript"></script> <script src="js/common.js?v=0.7.1" type="text/javascript"></script> <script src="js/jQueryRotate.js" type="text/javascript"></script> <script> </script> </head> <body> <div class="banner"> <div class="turnplate" style="background-image:url(css/images/bj.png);background-size:100%;"> <canvas class="item" id="wheelcanvas" width="100%" ></canvas> <img class="pointer" src="css/images/hand.png" id="pointer" > <a class="hdgz" id="rule-btn" href="javascript:void(0)">活动规则</a> <a class="ckjp" href="javascript:void(0)">查看我的奖品</a> </div> </div> <!--摇一摇活动说明规则--> <div id="rule" class="hide">摇一摇中卡券活动，活动时间:2015年1月1日摇一摇中卡券活动，活动时间:2015年1月1日摇一摇中卡券活动，活动时间:2015年1月1日摇一摇中卡券活动，活动时间:2015年1月1日摇一摇中卡券活动，活动时间:2015年1月1日</div> <!--摇一摇活动未开始提示--> <div id="no_time_start" class="hide">亲，您来的太早了，活动还没有开始呢！</div> <!--摇一摇活动结束提示--> <div id="time_end" class="hide">亲，您来晚了，活动已经结束了！</div> <!--已经摇中并领取--> <div id="git_sended" class="hide">亲，您已经参加过活动了，下次活动再来吧！</div> <!--已经摇中未领取--> <div id="no_git_send" class="hide">亲，您已经中过奖品了，点击下面按钮领取奖品吧！</div> <!--未关注用户--> <div id="user_gz" class="hide">亲，需要关注我们公众号才可以摇奖品哦！</div> <!--摇一摇未关注提示--> <!--摇一摇音效--> <audio id="audio_shake" src="css/images/wechat_shake.mp3" preload></audio> <audio id="audio_shake1" src="css/images/red-02.mp3" preload></audio> <!--摇一摇音效--> <!--<div class="modal-backdrop"></div> <div class="dia_box"> <div class="title"></div> <div class="content"> 1.参加活动人员关注后，即可参与“摇一摇”活动。<br/> 2.“摇一摇”开始后，屏幕显示中奖礼品为本次得奖礼品。<br/> 3. ⑤、⑥、⑦礼品仅限活动当晚兑换，逾期不候。(⑤、⑥、⑦礼品为暂定)<br/> 4. 活动最终解释权，归我公司所有，如有不明白事项，请提前咨询。 </div> <a href="javascript:void(0)" class="dia_close">关闭</a> </div>--> </body> </html>
根据手机晃动来加载事件：
// shake.event
(function(global, factory) {
if (typeof define === "function" && define.amd) {
define(function() {
return factory(global, global.document)
})
} else {
if (typeof module !== "undefined" && module.exports) {
module.exports = factory(global, global.document)
} else {
global.Shake = factory(global, global.document)
}
}
}(typeof window !== "undefined" ? window : this, function(window, document) {
function Shake(options) {
this.hasDeviceMotion = "ondevicemotion" in window;
this.options = {
threshold: 15,
timeout: 1000
};
if (typeof options === "object") {
for (var i in options) {
if (options.hasOwnProperty(i)) {
this.options[i] = options[i]
}
}
}
this.lastTime = new Date();
this.lastX = null ;
this.lastY = null ;
this.lastZ = null ;
if (typeof document.CustomEvent === "function") {
this.event = new document.CustomEvent("shake",{
bubbles: true,
cancelable: true
})
} else {
if (typeof document.createEvent === "function") {
this.event = document.createEvent("Event");
this.event.initEvent("shake", true, true)
} else {
return false
}
}
}
Shake.prototype.reset = function() {
this.lastTime = new Date();
this.lastX = null ;
this.lastY = null ;
this.lastZ = null
}
;
Shake.prototype.start = function() {
this.reset();
if (this.hasDeviceMotion) {
window.addEventListener("devicemotion", this, false)
}
}
;
Shake.prototype.stop = function() {
if (this.hasDeviceMotion) {
window.removeEventListener("devicemotion", this, false)
}
this.reset()
}
;
Shake.prototype.devicemotion = function(e) {
var current = e.accelerationIncludingGravity;
var currentTime;
var timeDifference;
var deltaX = 0;
var deltaY = 0;
var deltaZ = 0;
if ((this.lastX === null ) && (this.lastY === null ) && (this.lastZ === null )) {
this.lastX = current.x;
this.lastY = current.y;
this.lastZ = current.z;
return
}
deltaX = Math.abs(this.lastX - current.x);
deltaY = Math.abs(this.lastY - current.y);
deltaZ = Math.abs(this.lastZ - current.z);
if (((deltaX > this.options.threshold) && (deltaY > this.options.threshold)) || ((deltaX > this.options.threshold) && (deltaZ > this.options.threshold)) || ((deltaY > this.options.threshold) && (deltaZ > this.options.threshold))) {
currentTime = new Date();
timeDifference = currentTime.getTime() - this.lastTime.getTime();
if (timeDifference > this.options.timeout) {
window.dispatchEvent(this.event);
this.lastTime = new Date()
}
}
this.lastX = current.x;
this.lastY = current.y;
this.lastZ = current.z
}
;
Shake.prototype.handleEvent = function(e) {
if (typeof (this[e.type]) === "function") {
return this[e.type](e)
}
}
;
return Shake
}));
弹窗框div的封装
ar shakeEvent; // 提示框 var box_dialog = function(opt) { var box = $('<div class="modal-backdrop"></div><div class="dia_box"></div>').appendTo(document.body); var dlg = $('.dia_box'); if (opt.title == "title") { var head = $('<div class="title"></div>').appendTo(dlg); } else { var head = $('<div class="title1"></div>').appendTo(dlg); } var cont = $('<div class="content"></div>').appendTo(dlg); cont.html(opt.content); if (opt.closebtn == true) { $('<a class="dia_close"></a>').appendTo(dlg); } var yheight = $(window).height(); var theight = $(".dia_box").height(); var wheight = yheight - 120; $(".dia_box .content").css({ height: (theight > yheight) ? wheight : '' }); $(".dia_box").css({ top: (theight > yheight) ? 60 : (yheight - theight) / 2 }); return box; } ;
根据不同的状态 加载不同的提示内容 ，以及在数据库搜索之前 有动画加载进行中的loading效果！
$(function(){
//根据不同的状态来加载不同的提示框
shakeEvent = new Shake({ threshold:15, timeout:1000 });
shakeEvent.start();
window.addEventListener('shake', gift_shake, false);
$('#rule-btn').click(function(){
shakeEvent.stop();
var dlg = box_dialog({ title:'title', content:$('#rule').html(), closebtn:true});
dlg.find('.dia_close').text('关 闭').click(function(){
dlg.remove();
shakeEvent.start();
});
});
});
var sbox;
var gift_shake = function(){
$('#audio_shake')[0].play();
var vargs = [[-21,100], [0,300], [-21,600], [0,850]];
$(vargs).each(function(){
var _this = this;
setTimeout(function(){ $('#pointer').rotate(_this[0]);}, _this[1]);
});
setTimeout(function(){
$('#audio_shake')[0].pause();
$('#audio_shake1')[0].play();
sbox = $('<div class="modal-backdrop"></div><div class="msgtips search"><div>正在搜寻奖品...</div></div>').appendTo(document.body);
shakeEvent.stop();
}, 1500);
setTimeout(function(){
shakeTicket();
}, 2500 + ~~(Math.random() * 1500));}
像数据库进行ajax数据查询
//开始摇奖品 /*function shakeTicket() { //奖品摇到后，数据库查询到后,把提示语隐藏。然后再跳转到 卡卷。 sbox.remove(); var actId = $("#actId").val(); var openid = $("#openid").val(); var subscribe = $("#subscribe").val(); var jwid = $("#jwid").val(); var url = "../shaketicket/shakeTicket.do"; $.getJSON(url, {"actId": actId,"openid" : openid,"subscribe":subscribe,"jwid" : jwid}, function(data,status,xhr){ if (!!sbox) sbox.remove(); if (data.success) { var drawStatus = data.attributes.shaketicketRecord.drawStatus;//抽奖状态 var awardsName = data.attributes.shaketicketAward.awardsName;//奖品名称 var owner = data.attributes.shaketicketAward.owner;//发奖公司 var cardId = data.attributes.shaketicketAward.cardId;//卡券ID if(drawStatus == '0'){//未中奖 var msg = "真遗憾，再接再厉"; if(msg==null||msg==""){ msg = (NOGIFT_TIPs[~~(Math.random()*NOGIFT_TIPs.length)]||NOGIFT_TIPs[0]); } var dlg = box_dialog({ title:'没有摇到~', content:'<p style="margin:0;margin-top:9px;">' + msg + '</p>' }); dlg.find('.foot .-gifts').text('继续摇').click(function(){ dlg.remove(); shakeEvent.start(); }); }else{//已中奖 var gift = '<div><span style="margin:4px 0;display:inline-block;color:#999">恭喜你获得</span><br><b style="font-size:16px;">' + owner + '提供的</b><br><b style="font-size:16px;">' + awardsName + '</b></div>'; var dlg = box_dialog({ title:'恭喜！中奖啦！', content:gift }); dlg.find('.foot .-gifts').attr('onclick', 'addCard()'); } var use_times = $("#count").html();//每天剩余抽奖次数 if(use_times==null){ use_times = $("#num").html();//剩余抽奖次数 use_times--; $("#num").html(use_times); }else{ use_times--; $("#count").html(use_times); } } else { if(data.obj=="isNotFoucs"){ var dlg = box_dialog({ title:'友情提示', content:$('#no_focus').html() }); dlg.find('.foot .-gifts').text('关闭').click(function(){ dlg.remove(); shakeEvent.start(); }); }else if(data.obj=="isNotBind"){ var dlg = box_dialog({ title:'友情提示', content:$('#no_binding_phone').html() }); dlg.find('.foot .-gifts').text('关闭').click(function(){ dlg.remove(); shakeEvent.start(); }); }else{ var msg = data.msg; var dlg = box_dialog({ title:'友情提示~', content:'<p style="margin:0;margin-top:9px;">' + msg + '</p>' }); dlg.find('.foot .-gifts').text('关闭').click(function(){ dlg.remove(); shakeEvent.start(); }); } } }); } */
为了兼容不同浏览器 我们这用了一个插件 ，就是让摇动的时候 手机左右上下 晃动，当然也可以用css3 动画来写 ！
// VERSION: 2.3 LAST UPDATE: 11.07.2013
/*
* Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
*
* Made by Wilq32, wilq32@gmail.com, Wroclaw, Poland, 01.2009
* Website: http://code.google.com/p/jqueryrotate/
*/
浙公网安备 33010602011771号