html5刮獎區刮刮樂手機抽獎代碼



108 428 143



特效描述:html5 刮獎區 刮刮樂 手機抽獎代碼,html5手機抽獎,刮刮樂代碼

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/base.min.css"/>
<link rel="stylesheet" type="text/css" href="css/base.min.css"/>

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.eraser.js" ></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.eraser.js" ></script>

3. HTML代碼

<!DOCTYPE html>
<html style="font-size: 40px;">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>手機端刮獎效果</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv="Cache-Control" content="no-transform">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="layoutmode" content="standard">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="renderer" content="webkit">
		<!--uc瀏覽器判斷到頁面上文字居多時,會自動放大字體優化移動用戶體驗。添加以下頭部可以禁用掉該優化-->
		<meta name="wap-font-scale" content="no">
		<meta content="telephone=no" name="format-detection">
		<meta http-equiv="Pragma" content="no-cache">
		<script type="text/javascript">
			//html root的字體計算應該放在最前面,這樣計算就不會有誤差了/
			//2016.3.23 wjq update 之所以要加個判斷返回一個20.5,是因為當用戶在谷歌等瀏覽器直接輸入手機端網站網址時,如果用戶設置模塊自定義樣式的高度比較小,由于這時候的clientWidth為1920px,及返回的_htmlFontSize為40,這時候就會使模塊太小,展示不完全,因此先取一個較為準確的值去展示。Mobi.resetHtmlFontSize()順便也加了
			var _htmlFontSize = (function() {
				var clientWidth = document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth;
				if(clientWidth > 640) clientWidth = 640;
				document.documentElement.style.fontSize = clientWidth * 1 / 16 + "px";
				return clientWidth * 1 / 16;
			})();
		</script>
	</head>
	<body class="main_box" style="background-color: #1A1A1A">
		<div class="box">
			<div class="bg_in">
				<div class="title">?&nbsp;刮獎區&nbsp;?</div>
			</div>
			<div class="content">
				<div id="mask_img_bg"><img  src="images/mask_img_bg1.jpg" /></div>
				<img id="redux" src="images/mask-img.jpg" />
			</div>
		</div>
		<div class="show">
			<img class="show_bg" src="images/ok.png">
			<img class="show_bg1" src="images/ok1.png">
			<img class="show_food" src="images/mask_img_bg1.jpg" />
			<a class="close"></a>
			<a class="btn"></a>
		</div>
		<div class="mask"></div>
		<script type="text/javascript">
			$(window).load(function  () { //這個適用手機端,等圖片加載完再顯示,因為有可能會出現第一次加載圖片沒有加載完就不會出現canvas
				$('#redux').eraser( {
					size: 20,   //設置橡皮擦大小
				    completeRatio: .6, //設置擦除面積比例
				    completeFunction: showResetButton   //大于擦除面積比例觸發函數
				});
				function showResetButton(){
					$(".main_box .show,.main_box .mask").fadeIn(300)
				}
				$(".main_box .mask,.main_box .show .close,.main_box .show .btn").click(function  () {
					$(".main_box .show,.main_box .mask").fadeOut(300)
				})
			})
		</script>
	</body>
</html>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 拖動 拖拽 拖動插件 拖拽插件 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 滑動星星打分 其他 圖片拖動 圖片拖拽 文字提示框 提示文字 抽獎 轉盤抽獎
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子