在好例子网,分享、交流、成长!
您当前所在位置:首页js 开发实例网页游戏 → 刮刮卡 抽奖 示例源码

刮刮卡 抽奖 示例源码

网页游戏

下载此实例
  • 开发语言:js
  • 实例大小:0.48M
  • 下载次数:15
  • 浏览次数:423
  • 发布时间:2017-10-12
  • 实例类别:网页游戏
  • 发 布 人:highthink
  • 文件格式:.rar
  • 所需积分:2
 相关标签: 刮刮卡

同类人气实例

实例介绍

【实例简介】很不错的刮刮卡源码,兼容移动端

【实例截图】

【核心代码】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>刮刮卡</title>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript"  src="js/jquery-1.9.1.js"></script>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{position:relative;background:url(img/guaguaka_bg.png) no-repeat 50% 0;height:640px;overflow:hidden;}

#bg2{width:295px;height:195px;margin:0 auto;}
#gua1{width:295px;;margin:0 auto;}
#notify{width:295px;height:101px;margin:0 auto;}
#nImg_div{position:absolute;color:white;font-size:17px;font-family:'黑体';}
#nImg_div div{width:245px;height:101px;padding:20px 0px 0px 50px;}
#di{width:295px;margin:0 auto;}
#bg1{display:none;position:fixed;top:0%;left:0%;width:100%;height:100%;background-color:black;z-index:1001;-moz-opacity:0.7;opacity:.70;filter:alpha(opacity=70);}
#show{display:none;position:absolute;top:222px;left:50%;margin-left:-148px;text-align:center;background-color:#fff;z-index:1002;overflow:auto;}
#show div{margin-top:-145px;margin-left:40px;padding-right:40px;line-height:1.5;color:#000000;font-size:17px;font-family:'黑体';}
</style>

</head>
<body>

<div id="bg2"><img id="bg2_img" src="img/guaguaka_word.png" width="295" height="195" style="position:absolute;"/></div>

<div id="gua1">
<img id="gua1_img" src="img/gua_image.png" style="position: absolute;"/>
<canvas id="front" style="position:absolute;" />
</div>

<div id="notify">
<img id="nImg" src="img/notice_bg.png" style="position: absolute;"/>
<div id="nImg_div">
<div>每天登陆热拍有1张刮刮卡哦~元旦开始,热币可抵现金,还可抽神秘大奖!</div>
</div>
</div>
<div id="di"><img id="di_img" src="img/detail_declare_bg.png" style="position: absolute;"/></div>

<div id="bg1"></div>

<div id="show">
<img id="show_img" src="img/dialog_bg.png" width="100%" height="100%"/>
<div>亲,您今天的机会已经用完了~明天再接再励!</div>
<img id="show_btn" src="img/btn_sure.png" style="margin-top: 30px;" onClick="hidediv()"/>
</div>


<script type="text/javascript">   
var gua = 1,re = 2;  // 可设置刮奖次数
var imgSrc = 'img/aa.png';

function showdiv() { 
document.getElementById("bg1").style.display ="block";
document.getElementById("show").style.display ="block";
}

function hidediv() {
document.getElementById("bg1").style.display ='none';
document.getElementById("show").style.display ='none';
}

$(function(){
var width = $("#show_img").width();
var height = $("#show_img").height();
var winheight=$(window).height();
var winwidth=$(window).width();
$("#show").css({"width":300 "px","height":160 "px","overflow":"hidden"});
$("#show_btn").css({"width":176*0.5 "px","height":76*0.5 "px"});
$("#gua_div").html("x" gua);
$("#re_div").html("x" re);

if(gua == 0){
showdiv();
}
})

$("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"});
if(gua > 0){
bodys(height,width);
}
});
function bodys(height,width){
var img = new Image();         
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();                     
}                
}             
}               
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>
<div style="text-align:center;">
<p>来源:<a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>
</div>
</body>
</html>

标签: 刮刮卡

实例下载地址

刮刮卡 抽奖 示例源码

不能下载?内容有错? 点击这里报错 + 投诉 + 提问

好例子网口号:伸出你的我的手 — 分享

网友评论

发表评论

(您的评论需要经过审核才能显示)

查看所有0条评论>>

小贴士

感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。

  • 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
  • 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
  • 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
  • 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。

关于好例子网

本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享,对搜索内容的合法性不具有预见性、识别性、控制性,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论平台是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定,若资源存在侵权或相关问题请联系本站客服人员,点此联系我们。关于更多版权及免责申明参见 版权及免责申明

;
报警