Dieser Artikel stellt vor allem js vor, um den Rubbelloseffekt auf PCs und mobilen Endgeräten zu erzielen. Er hat einen gewissen Referenzwert.
Die Beispiele in diesem Artikel werden mit allen geteilt Der spezifische Code für den js-Rubbelkarteneffekt dient als Referenz. Der spezifische Inhalt lautet wie folgt:
Effektbild:
Spezifischer Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>小月博客刮刮卡案例分享</title>
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
}
body {
background: #E34830;
position: relative;
}
.banner1 {
display: block;
width: 100%;
/*height: auto;*/
overflow: hidden;
}
.ggl {
position: relative;
width: 85.6%;
height: 90px;
margin: -5px auto;
background: url(img/ggl.png) no-repeat center center;
background-size: 100% 100%;
border: 1px solid blue;
}
.canvas {
position: absolute;
top: 2px;
left: 2.5%;
width: 95%;
height: 82px;
line-height: 82px;
text-align: center;
z-index: 2;
border: 1px solid black;
}
.info {
position: absolute;
top: 2px;
left: 2.5%;
width: 95%;
height: 82px;
text-align: center;
}
.info span {
display: block;
font-size: 18px;
}
#prompt {
line-height: 40px;
}
.btn {
position: relative;
width: 50%;
height: 35px;
line-height: 35px;
background: #df412b;
color: #fff;
border-radius: 5px;
margin: 0 auto;
z-index: 1;
}
.guize {
display: block;
width: 85.6%;
height: auto;
margin: 5% auto 10% auto;
border-radius: 5px;
border: 1px solid black;
}
.num {
width: 90%;
margin: 0 auto;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 14px;
margin-top: 5%;
border: 1px solid black;
}
#ok,
#no {
display: none;
}
.pop {
position: fixed;
left: 0;
top: 0;
z-index: 3;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
display: none;
}
.pop img {
width: 100%;
height: auto;
overflow: hidden;
margin: 15% auto;
}
</style>
<script>
//控制刮卡次数
var t = 0;
//初始化所有数据并且随机产生奖品
var initialize = function() {
//剩余刮卡次数
$('.num1').html(4 - t);
//随机数
function getRandomNum(lbound, ubound) {
return (Math.floor(Math.random() * (ubound - lbound)) + lbound);
}
var r = getRandomNum(1, 100);
var btn = document.getElementsByClassName("btn");
for (var i = 0; i < btn.length; i++) {
btn[i].style.zIndex = '1';
}
document.getElementById("no").style.display = "none";
document.getElementById("ok").style.display = "none";
//初始化涂抹面积
isOk = 0;
if (r < t * 33) {
document.getElementById("prompt").innerHTML = "恭喜您，中奖了！"
var ok = document.getElementById("ok");
ok.style.display = "block";
//点击领取奖品
ok.onclick = function() {
window.location.href = "prize.html"
};
} else {
document.getElementById("prompt").innerHTML = "很遗憾，未中奖！"
document.getElementById("no").style.display = "block";
}
};
var c1; //画布
var ctx; //画笔
var ismousedown; //标志用户是否按下鼠标或开始触摸
var isOk = 0; //标志用户是否已经刮开了一半以上
var fontem = parseInt(window.getComputedStyle(document.documentElement, null)["font-size"]); //这是为了不同分辨率上配合@media自动调节刮的宽度
/* 页面加载后开始初始化画布 */
window.onload = function() {
initialize();
c1 = document.getElementById("c1");
//这里很关键，canvas自带两个属性width、height,我理解为画布的分辨率，跟style中的width、height意义不同。
//最好设置成跟画布在页面中的实际大小一样
//不然canvas中的坐标跟鼠标的坐标无法匹配
c1.width = c1.clientWidth;
c1.height = c1.clientHeight;
ctx = c1.getContext("2d");
//PC端的处理
c1.addEventListener("mousemove", eventMove, false);
c1.addEventListener("mousedown", eventDown, false);
c1.addEventListener("mouseup", eventUp, false);
//移动端的处理
c1.addEventListener('touchstart', eventDown, false);
c1.addEventListener('touchend', eventUp, false);
c1.addEventListener('touchmove', eventMove, false);
//初始化
initCanvas();
}
//初始化画布，画灰色的矩形铺满
function initCanvas() {
//网上的做法是给canvas设置一张背景图片，我这里的做法是直接在canvas下面另外放了个p。
//c1.style.backgroundImage="url(中奖图片.jpg)";
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = '#aaaaaa';
ctx.fillRect(0, 0, c1.clientWidth, c1.clientHeight);
ctx.fill();
ctx.font = "Bold 30px Arial";
ctx.textAlign = "center";
ctx.fillStyle = "#999999";
ctx.fillText("刮一刮", c1.width / 2, 50);
//把这个属性设为这个就可以做出圆形橡皮擦的效果
//有些老的手机自带浏览器不支持destination-out,下面的代码中有修复的方法
ctx.globalCompositeOperation = 'destination-out';
}
//鼠标按下 和 触摸开始
function eventDown(e) {
e.preventDefault();
ismousedown = true;
}
//鼠标抬起 和 触摸结束
function eventUp(e) {
e.preventDefault();
//得到canvas的全部数据
var a = ctx.getImageData(0, 0, c1.width, c1.height);
var j = 0;
for (var i = 3; i < a.data.length; i += 4) {
if (a.data[i] == 0) j++;
}
//当被刮开的区域等于一半时，则可以开始处理结果
if (j >= a.data.length / 8) {
isOk = 1;
}
ismousedown = false;
}
//鼠标移动 和 触摸移动
function eventMove(e) {
e.preventDefault();
if (ismousedown) {
if (e.changedTouches) {
e = e.changedTouches[e.changedTouches.length - 1];
}
var topY = document.getElementById("top").offsetTop;
var oX = c1.offsetLeft,
oY = c1.offsetTop + topY;
var x = (e.clientX + document.body.scrollLeft || e.pageX) - oX || 0,
y = (e.clientY + document.body.scrollTop || e.pageY) - oY || 0;
//画360度的弧线，就是一个圆，因为设置了ctx.globalCompositeOperation = 'destination-out';
//画出来是透明的
ctx.beginPath();
ctx.arc(x, y, fontem * 1.2, 0, Math.PI * 2, true);
//下面3行代码是为了修复部分手机浏览器不支持destination-out
//我也不是很清楚这样做的原理是什么
c1.style.display = 'none';
c1.offsetHeight;
c1.style.display = 'inherit';
ctx.fill();
}
if (isOk) {
var btn = document.getElementsByClassName("btn");
for (var i = 0; i < btn.length; i++) {
btn[i].style.zIndex = '3';
}
document.getElementsByClassName("btn")[0].style.zIndex = "3";
}
}
//没有中奖再来一次
$("#no").click(function() {
if (t > 3) {
//因该弹出遮罩层提示您的次数已经用完了
$('.pop1').show();
$('.pop1 img').click(function() {
$('.pop1').hide();
})
} else {
t++;
//初始化按钮
document.getElementById("no").style.display = "none";
document.getElementById("ok").style.display = "none";
window.onload();
initCanvas();
}
});
</script>
</head>
<body>
<img class="banner1 lazy" src="/static/imghwm/default1.png" data-src="img/banner1.png" / alt="js, um den Rubbelloseffekt auf PCs und mobilen Endgeräten zu erzielen" >
<p class="ggl" id="top">
<p class="info" id="prize">
<span id="prompt"></span>
<span class="btn" id="ok">领取奖品</span>
<span class="btn" id="no">再来一次</span>
</p>
<canvas id="c1" class="canvas"></canvas>
</p>
<p class="num">
您还有<span class="num1"></span>次刮卡机会
</p>
<img class="guize lazy" src="/static/imghwm/default1.png" data-src="img/guize.png" / alt="js, um den Rubbelloseffekt auf PCs und mobilen Endgeräten zu erzielen" >
<!-- 遮罩层1抽奖次数已经用完-->
<p class="pop pop1">
<img src="/static/imghwm/default1.png" data-src="img/pop1.png" class="lazy" / alt="js, um den Rubbelloseffekt auf PCs und mobilen Endgeräten zu erzielen" >
</p>
<p class="pop pop2">
<img src="/static/imghwm/default1.png" data-src="img/pop2.png" class="lazy" id="pop2" / alt="js, um den Rubbelloseffekt auf PCs und mobilen Endgeräten zu erzielen" >
</p>
</body>
</html>Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt. Ich hoffe auch, dass jeder die PHP-Chinesisch-Website unterstützt.
Weitere Artikel zum Thema JS zum Realisieren des Rubbelloseffekts auf PCs und mobilen Endgeräten finden Sie auf der chinesischen PHP-Website!
JavaScript -Frameworks: Stromversorgung moderner WebentwicklungMay 02, 2025 am 12:04 AMDie Kraft des JavaScript -Frameworks liegt in der Vereinfachung der Entwicklung, der Verbesserung der Benutzererfahrung und der Anwendungsleistung. Betrachten Sie bei der Auswahl eines Frameworks: 1. Projektgröße und Komplexität, 2. Teamerfahrung, 3. Ökosystem und Community -Unterstützung.
Die Beziehung zwischen JavaScript, C und BrowsernMay 01, 2025 am 12:06 AMEinführung Ich weiß, dass Sie es vielleicht seltsam finden. Was genau muss JavaScript, C und Browser tun? Sie scheinen nicht miteinander verbunden zu sein, aber tatsächlich spielen sie eine sehr wichtige Rolle in der modernen Webentwicklung. Heute werden wir die enge Verbindung zwischen diesen drei diskutieren. In diesem Artikel erfahren Sie, wie JavaScript im Browser ausgeführt wird, die Rolle von C in der Browser -Engine und wie sie zusammenarbeiten, um das Rendern und die Interaktion von Webseiten voranzutreiben. Wir alle kennen die Beziehung zwischen JavaScript und Browser. JavaScript ist die Kernsprache der Front-End-Entwicklung. Es läuft direkt im Browser und macht Webseiten lebhaft und interessant. Haben Sie sich jemals gefragt, warum Javascr
Node.js Streams mit TypeScriptApr 30, 2025 am 08:22 AMNode.js zeichnet sich bei effizienten E/A aus, vor allem bei Streams. Streams verarbeiten Daten inkrementell und vermeiden Speicherüberladung-ideal für große Dateien, Netzwerkaufgaben und Echtzeitanwendungen. Die Kombination von Streams mit der TypeScript -Sicherheit erzeugt eine POWE
Python vs. JavaScript: Leistung und EffizienzüberlegungenApr 30, 2025 am 12:08 AMDie Unterschiede in der Leistung und der Effizienz zwischen Python und JavaScript spiegeln sich hauptsächlich in: 1 wider: 1) Als interpretierter Sprache läuft Python langsam, weist jedoch eine hohe Entwicklungseffizienz auf und ist für eine schnelle Prototypentwicklung geeignet. 2) JavaScript ist auf einen einzelnen Thread im Browser beschränkt, aber Multi-Threading- und Asynchronen-E/A können verwendet werden, um die Leistung in Node.js zu verbessern, und beide haben Vorteile in tatsächlichen Projekten.
Die Ursprünge von JavaScript: Erforschung seiner ImplementierungsspracheApr 29, 2025 am 12:51 AMJavaScript stammt aus dem Jahr 1995 und wurde von Brandon Ike erstellt und realisierte die Sprache in C. 1.C-Sprache bietet Programmierfunktionen auf hoher Leistung und Systemebene für JavaScript. 2. Die Speicherverwaltung und die Leistungsoptimierung von JavaScript basieren auf C -Sprache. 3. Die plattformübergreifende Funktion der C-Sprache hilft JavaScript, auf verschiedenen Betriebssystemen effizient zu laufen.
Hinter den Kulissen: Welche Sprache macht JavaScript?Apr 28, 2025 am 12:01 AMJavaScript wird in Browsern und Node.js -Umgebungen ausgeführt und stützt sich auf die JavaScript -Engine, um Code zu analysieren und auszuführen. 1) abstrakter Syntaxbaum (AST) in der Parsenstufe erzeugen; 2) AST in die Kompilierungsphase in Bytecode oder Maschinencode umwandeln; 3) Führen Sie den kompilierten Code in der Ausführungsstufe aus.
Die Zukunft von Python und JavaScript: Trends und VorhersagenApr 27, 2025 am 12:21 AMZu den zukünftigen Trends von Python und JavaScript gehören: 1. Python wird seine Position in den Bereichen wissenschaftlicher Computer und KI konsolidieren. JavaScript wird die Entwicklung der Web-Technologie fördern. Beide werden die Anwendungsszenarien in ihren jeweiligen Bereichen weiter erweitern und mehr Durchbrüche in der Leistung erzielen.
Python vs. JavaScript: Entwicklungsumgebungen und ToolsApr 26, 2025 am 12:09 AMSowohl Python als auch JavaScripts Entscheidungen in Entwicklungsumgebungen sind wichtig. 1) Die Entwicklungsumgebung von Python umfasst Pycharm, Jupyternotebook und Anaconda, die für Datenwissenschaft und schnelles Prototyping geeignet sind. 2) Die Entwicklungsumgebung von JavaScript umfasst Node.JS, VSCODE und WebPack, die für die Entwicklung von Front-End- und Back-End-Entwicklung geeignet sind. Durch die Auswahl der richtigen Tools nach den Projektbedürfnissen kann die Entwicklung der Entwicklung und die Erfolgsquote der Projekte verbessert werden.
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
SecLists
SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Dreamweaver Mac
Visuelle Webentwicklungstools
