<!DOCTYPE HTML>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
<meta name="format-detection" content="telephone=no">
|
<script type="text/javascript" src="https://www.js-css.cn/jscode/award/award10/js/jquery-1.9.1.js"></script>
|
<title>刮刮卡抽奖</title>
|
<style type="text/css">
|
.scroll{
|
position:absolute;
|
overflow:scroll;
|
-webkit-overflow-scrolling: touch;
|
top:0;
|
left:0;
|
bottom:0;
|
right:0;
|
}
|
</style>
|
</head>
|
<body>
|
<div id="bg" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 735px;"><img src="https://hdg.faisys.com/image/ygqj/homeBg.jpg" width="100%" height="100%"></div>
|
<div id="bg2" style="width:295px;height:195px;margin:0 auto;">
|
<img id="bg2_img" src="http://hdg.faisys.com/image/ygqj/title.png" width="295" height="195" style="position: absolute;">
|
</div>
|
<div>
|
|
</div>
|
<div id="gua1" style="width: 295px; margin: 20px auto 0px;">
|
<img id="gua1_img" src="https://www.js-css.cn/jscode/award/award10/img/gua_image.png" style="position: absolute; width: 300px; height: 160px;">
|
<canvas id="front" style="position: absolute; margin-top: 9.3px; margin-left: 7.5px; background-image: url('https://www.js-css.cn/jscode/award/award10/img/aa.png');" width="285" height="141">
|
</canvas>
|
</div>
|
<div id="notify" style="width: 295px; height: 101px; margin: 100px auto 0px;">
|
<img id="nImg" src="img/notice_bg.png" style="position: absolute; height: 101px;">
|
<div id="nImg_div" style="position: absolute;color:white;font-size: 16px;font-family: '黑体'" align="center">
|
<div style="width:245px;height:101px;padding:10px 0px 0px 50px;" align="left">感谢您选择"966120医疗快线"转运服务！刮开上方刮刮卡，抽取神秘礼物，最高奖励可获全单返现喔！</div>
|
</div>
|
</div>
|
<div id="d33" style="width: 295px; height: 101px; margin: 100px auto 0px;">
|
<div id="d333" style="position: absolute;color:white;font-size: 16px;font-family: '黑体'" align="center">
|
<div style="width:295px;height:101px;" align="">本次活动的最终解释权归<br>广东民航医疗快线有限公司所有</div>
|
</div>
|
</div>
|
</body>
|
<script type="text/javascript">
|
document.body.addEventListener('touchmove' , function(e){
|
e.preventDefault();
|
})
|
</script>
|
|
<script type="text/javascript">
|
var gua = 1,re = 2;
|
var imgSrc = 'https://www.js-css.cn/jscode/award/award10/img/aa.png';
|
|
|
|
|
$("img").load(function(){
|
var body_width = $(window).width();
|
var body_height = $(window).height();
|
$("#gua1_img").width(300).height(160);
|
var height = 141;
|
var width = 285;
|
var bg2_width = $("#bg2_img").width();
|
var bg2_height = $("#bg2_img").height();
|
|
$("#gua1").css({"margin-top":"20px"});
|
|
$("#notify").css({"margin-top":"200px"});
|
$("#nImg").width(300).height(101);
|
|
$("#di").css({"margin-top":"50px"});
|
$("#di_img").width(414*0.7).height(24*0.7);
|
|
|
$("#gua").width(width/10).height(width/10);
|
$("#gua_div").css({"line-height":width/10+"px","width":width/10+"px","height":width/10+"px","margin-top":"-"+($("#gua").height())+"px","margin-left":$("#gua").height()+5+"px","font-size": $("#gua").height()/1.6+"px"});
|
$("#re").width(width/10).height(width/10);
|
$("#re_div").css({ "line-height":width/10+"px","width":width/10+"px","height":width/10+"px","margin-top":"-"+($("#gua").height())+"px","margin-left":$("#gua").height()+5+"px","font-size": $("#gua").height()/1.6+"px"});
|
var gua1_img_width = $("#gua1_img").width();
|
$("#front").css({"margin-top":9.3+"px","margin-left":7.5+"px"});
|
$("#bg").width("100%").height($(window).height()-1);
|
if(gua > 0){
|
bodys(height,width);
|
}
|
});
|
function bodys(height,width){
|
var img = new Image();
|
var isOk = 0;
|
var canvas = document.querySelector('canvas');
|
canvas.style.position = 'absolute';
|
img.addEventListener('load',function(e){
|
var ctx;
|
var w = width, h = height;
|
var offsetX = canvas.offsetLeft, offsetY = canvas.offsetTop;
|
var mousedown = false;
|
function layer(ctx){
|
ctx.fillStyle = 'gray';
|
ctx.fillRect(0, 0, w, h);
|
}
|
function eventDown(e){
|
e.preventDefault();
|
mousedown=true;
|
}
|
function eventUp(e){
|
e.preventDefault();
|
mousedown=false;
|
}
|
function eventMove(e){
|
e.preventDefault();
|
if(mousedown){
|
if(e.changedTouches){
|
e=e.changedTouches[e.changedTouches.length-1];
|
}
|
var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0,
|
y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;
|
with(ctx){
|
beginPath()
|
arc(x, y, 15, 0, Math.PI * 2);
|
fill();
|
if (x>=65 && x<=180 && y>=55 && y<=90)
|
{
|
isOk=isOk+1;
|
if (isOk>=20)
|
{
|
window.location.href='/OrdEvaluateOK.asp';
|
}
|
}
|
}
|
|
|
//alert(restore());
|
//window.location.href='http://www.baidu.com';
|
}
|
}
|
canvas.width=w;
|
canvas.height=h;
|
|
canvas.style.backgroundImage='url('+img.src+')';
|
ctx=canvas.getContext('2d');
|
ctx.fillStyle='b9b9b9';
|
ctx.fillRect(0, 0, w, h);
|
|
layer(ctx);
|
ctx.globalCompositeOperation = 'destination-out';
|
canvas.addEventListener('touchstart', eventDown);
|
canvas.addEventListener('touchend', eventUp);
|
canvas.addEventListener('touchmove', eventMove);
|
canvas.addEventListener('mousedown', eventDown);
|
canvas.addEventListener('mouseup', eventUp);
|
canvas.addEventListener('mousemove', eventMove);
|
});
|
|
img.src = imgSrc;
|
(document.body.style);
|
}
|
|
|
|
</script>
|
</html>
|
