您好，我有残酷的想法使Div禁用。当我刮擦并将其设为50％时，必须禁用2框，并且不能刮擦
这是代码
身体
<div class="scratch-container">
<div class="col-xs-4">
<div id="promo" class="scratchpad"></div>
</div>
<div class="col-xs-4">
<div id="promo2" class="scratchpad"></div>
</div>
<div class="col-xs-4">
<div id="promo3" class="scratchpad"></div>
</div>
<div class="col-xs-6 col-xs-offset-5">
<button onclick="myFunction()" class="btn">Reset page</button>
</div>
</div>
Java脚本
scratchMove: function (e, percent) {
// Show the plain-text promo code and call-to-action when the scratch area is 50% scratched
if ((percent > 50)) {
$('.promo2').prop('disabled',true);
$('.promo3').prop('disabled',true);
}
}
完整代码
<html>
<head>
<title> </title>
<meta name="apple-mobile-web-app-capable" content="yes">
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.scratchpad{
width: 250px;
height: 245px;
border: solid 5px #FFFFFF;
margin:0 auto;
}
body {
background: red;
}
.scratch-container {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width:100%;
}
@media only screen and (max-width : 480px) {
.scratchpad {width:400px;height:396px;}
.scratch-container {width:400px !important;}
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
.scratchpad {width:290px;height:287px;}
.scratch-container {width:290px !important;}
}
.promo-container {
background:#FFF;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
width:450px;
padding:20px;
margin:0 auto;
text-align:center;
font-family:'Open Sans', Arial,Sans-serif;
color:#333;
font-size:16px;
margin-top:20px;
}
.btn {
background:#56CFD2;
color:#FFF;
padding:10px 25px;
display:inline-block;
margin-top:15px;
text-decoration:none;
font-weight:600;
text-transform:uppercase;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radiuss:3px;
}
.disabled{
position:relative;
z-index:10;
pointer-events:none
}
.disabled:before {
content:"";
position:absolute;
pointer-events:none;
top:0;
left:0;
right:0;
bottom:0;
z-index:100;
background-color:rgba(0,0,0,0.35);
}
</style>
</head>
<body style="background-color: green;">
<div class="col-xs-12">
<div>
</div>
</div>
<div class="col-xs-12" style="padding-top: 250px">
<div class="scratch-container">
<div class="col-xs-4">
<div id="promo" class="scratchpad"></div>
</div>
<div class="col-xs-4">
<div id="promo2" class="scratchpad"></div>
</div>
<div class="col-xs-4">
<div id="promo3" class="scratchpad"></div>
</div>
<div class="col-xs-6 col-xs-offset-5">
<button onclick="myFunction()" class="btn">Reset page</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://jennamolby.com/scratch-and-win/js/wScratchPad.min.js"></script>
<script type="text/javascript">
function myFunction() {
location.reload();
}
var promoCode = '';
var bg1 = 'https://jennamolby.com/scratch-and-win/images/400.png';
var bg2 = 'https://jennamolby.com/scratch-and-win/images/500.png';
var bg3 = 'https://jennamolby.com/scratch-and-win/images/sorry.png';
var bgArray= [ bg1, bg2, bg3 ],
selectBG = bgArray[Math.floor(Math.random() * bgArray.length)];
if (selectBG == bg1) {
promoCode = 'SCRATCH400';
} else if (selectBG == bg2) {
promoCode = 'SCRATCH500';
} if (selectBG == bg3) {
var promoCode = '';
}
$('#promo').wScratchPad({
// the size of the eraser
size : 80,
// the randomized scratch image
bg: selectBG,
// give real-time updates
realtime : true,
// The overlay image
fg: 'https://jennamolby.com/scratch-and-win/images/overlay.png',
// The cursor (coin) image
'cursor': 'url("https://jennamolby.com/scratch-and-win/images/coin1.png") 5 5, default',
scratchMove: function (e, percent) {
// Show the plain-text promo code and call-to-action when the scratch area is 50% scratched
if ((percent > 50)) {
$('#promo2').prop('disabled',true);
$('#promo3').prop('disabled',true);
}
}
});
var bgs1 = 'https://jennamolby.com/scratch-and-win/images/400.png';
var bgs2 = 'https://jennamolby.com/scratch-and-win/images/500.png';
var bgs3 = 'https://jennamolby.com/scratch-and-win/images/sorry.png';
var bgArrays= [ bgs1, bgs2, bgs3 ],
selectBGs = bgArrays[Math.floor(Math.random() * bgArrays.length)];
if (selectBGs == bgs1) {
promoCode = 'SCRATCH400';
} else if (selectBGs == bgs2) {
promoCode = 'SCRATCH500';
} if (selectBGs == bgs3) {
var promoCode = '';
}
$('#promo2').wScratchPad({
// the size of the eraser
size : 80,
// the randomized scratch image
bg: selectBGs,
// give real-time updates
realtime : true,
// The overlay image
fg: 'https://jennamolby.com/scratch-and-win/images/overlay.png',
// The cursor (coin) image
'cursor': 'url("https://jennamolby.com/scratch-and-win/images/coin1.png") 5 5, default',
scratchMove: function (e, percent) {
// Show the plain-text promo code and call-to-action when the scratch area is 50% scratched
if ((percent > 50)) {
$('#promo').prop('disabled',true);
$('#promo3').prop('disabled',true);
}
}
});
var bgss1 = 'https://jennamolby.com/scratch-and-win/images/400.png';
var bgss2 = 'https://jennamolby.com/scratch-and-win/images/500.png';
var bgss3 = 'https://jennamolby.com/scratch-and-win/images/sorry.png';
var bgArrayss= [ bgss1, bgss2, bgss3 ],
selectBGss = bgArrayss[Math.floor(Math.random() * bgArrayss.length)];
if (selectBGss == bgss1) {
promoCode = 'SCRATCH400';
} else if (selectBGss == bgss2) {
promoCode = 'SCRATCH500';
} if (selectBGss == bgss3) {
var promoCode = '';
}
$('#promo3').wScratchPad({
// the size of the eraser
size : 80,
// the randomized scratch image
bg: selectBGss,
// give real-time updates
realtime : true,
// The overlay image
fg: 'https://jennamolby.com/scratch-and-win/images/overlay.png',
// The cursor (coin) image
'cursor': 'url("https://jennamolby.com/scratch-and-win/images/coin1.png") 5 5, default',
scratchMove: function (e, percent) {
// Show the plain-text promo code and call-to-action when the scratch area is 50% scratched
if ((percent > 50)) {
$('#promo2').addClass('disabled');
$('#promo3').addClass('disabled');
}
}
});
</script>
</td></tr> </table></form>
<audio id="audio" src="sounds/drum.mp3" ></audio>
</BODY></html>
答案 0 :(得分：0)
将css pointer-events属性设置为无，如下所示：
$(document).ready(function () {
$("#promo2, #promo3").css('pointer-events', 'none');
});
答案 1 :(得分：0)
div中没有disabled。您可以根据需要禁用便签本。如果此操作不起作用，则需要在确实存在的功能中将其禁用。
尝试一下
scratchMove: function (e, percent) {
/* Show the plain-text promo code and call-to-action when the scratch area is 50% scratched*/
if ((percent > 50)) {
$('#promo2').css('pointer-events','none');
$('#promo3').css('pointer-events','none');
}
}
或
scratchMove: function (e, percent) {
// Show the plain-text promo code and call-to-action when the scratch area is 50% scratched
if ((percent > 50)) {
/* Disable all other scratchpads except this, make sure you pass the event correctly*/
$('.scratchpad').not($(e.target)).css('pointer-events','none');
}
}
更新
您的代码没有问题，我验证了原始来源。但是您需要注意以下事项才能正常工作。
将您的代码更改为以下内容，并且应该可以使用
if ((percent > 50)) {
$('#promo2').css('pointer-events','none');
$('#promo3').css('pointer-events','none');
}
答案 2 :(得分：0)
在您的HTML头标记文件中
<style type="text/CSS">.disabled , .disabled canvas{pointer-events:none!important;}</style>
在您的JS中
scratchMove: function (e, percent) {
// Show the plain-text promo code and call-to-action when the scratch area is 50% scratched
if ((percent > 50)) {
$('#promo2,#promo3').addClass('disabled');
}
}
/*! wScratchPad - v2.0.3 - 2014-04-05 */!function(a){"use strict";function b(b,c){this.$el=a(b),this.options=c,this.init=!1,this.enabled=!0,this._generate()}b.prototype={_generate:function(){return a.support.canvas?(this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),"static"===this.$el.css("position")&&this.$el.css("position","relative"),this.$img=a('<img src=""/>').attr("crossOrigin","").css({position:"absolute",width:"100%",height:"100%"}),this.$scratchpad=a(this.canvas).css({position:"absolute",width:"100%",height:"100%"}),this.$scratchpad.bindMobileEvents(),this.$scratchpad.mousedown(a.proxy(function(b){return this.enabled?(this.canvasOffset=a(this.canvas).offset(),this.scratch=!0,void this._scratchFunc(b,"Down")):!0},this)).mousemove(a.proxy(function(a){this.scratch&&this._scratchFunc(a,"Move")},this)).mouseup(a.proxy(function(a){this.scratch&&(this.scratch=!1,this._scratchFunc(a,"Up"))},this)),this._setOptions(),this.$el.append(this.$img).append(this.$scratchpad),this.init=!0,void this.reset()):(this.$el.append("Canvas is not supported in this browser."),!0)},reset:function(){var b=this,c=Math.ceil(this.$el.innerWidth()),d=Math.ceil(this.$el.innerHeight());this.pixels=c*d,this.$scratchpad.attr("width",c).attr("height",d),this.$img.hide(),this.options.bg&&("#"===this.options.bg.charAt(0)?this.$el.css("backgroundColor",this.options.bg):(this.$el.css("backgroundColor",""),this.$img.attr("src",this.options.bg))),this.options.fg&&("#"===this.options.fg.charAt(0)?(this.ctx.fillStyle=this.options.fg,this.ctx.beginPath(),this.ctx.rect(0,0,c,d),this.ctx.fill(),this.$img.show()):a(new Image).attr("src",this.options.fg).load(function(){b.ctx.drawImage(this,0,0,c,d),b.$img.show()}))},clear:function(){this.ctx.clearRect(0,0,Math.ceil(this.$el.innerWidth()),Math.ceil(this.$el.innerHeight()))},enable:function(a){this.enabled=a===!0?!0:!1},destroy:function(){this.$el.children().remove(),a.removeData(this.$el,"wScratchPad")},_setOptions:function(){var a,b;for(a in this.options)this.options[a]=this.$el.attr("data-"+a)||this.options[a],b="set"+a.charAt(0).toUpperCase()+a.substring(1),this[b]&&this[b](this.options[a])},setBg:function(){this.init&&this.reset()},setFg:function(){this.setBg()},setCursor:function(a){this.$el.css("cursor",a)},_scratchFunc:function(a,b){a.pageX=Math.floor(a.pageX-this.canvasOffset.left),a.pageY=Math.floor(a.pageY-this.canvasOffset.top),this["_scratch"+b](a),(this.options.realtime||"Up"===b)&&this.options["scratch"+b]&&this.options["scratch"+b].apply(this,[a,this._scratchPercent()])},_scratchPercent:function(){for(var a=0,b=this.ctx.getImageData(0,0,this.canvas.width,this.canvas.height),c=0,d=b.data.length;d>c;c+=4)0===b.data[c]&&0===b.data[c+1]&&0===b.data[c+2]&&0===b.data[c+3]&&a++;return a/this.pixels*100},_scratchDown:function(a){this.ctx.globalCompositeOperation="destination-out",this.ctx.lineJoin="round",this.ctx.lineCap="round",this.ctx.strokeStyle=this.options.color,this.ctx.lineWidth=this.options.size,this.ctx.beginPath(),this.ctx.arc(a.pageX,a.pageY,this.options.size/2,0,2*Math.PI,!0),this.ctx.closePath(),this.ctx.fill(),this.ctx.beginPath(),this.ctx.moveTo(a.pageX,a.pageY)},_scratchMove:function(a){this.ctx.lineTo(a.pageX,a.pageY),this.ctx.stroke()},_scratchUp:function(){this.ctx.closePath()}},a.support.canvas=document.createElement("canvas").getContext,a.fn.wScratchPad=function(c,d){function e(){var d=a.data(this,"wScratchPad");return d||(d=new b(this,a.extend(!0,{},c)),a.data(this,"wScratchPad",d)),d}if("string"==typeof c){var f,g=[],h=(void 0!==d?"set":"get")+c.charAt(0).toUpperCase()+c.substring(1),i=function(){f.options[c]&&(f.options[c]=d),f[h]&&f[h].apply(f,[d])},j=function(){return f[h]?f[h].apply(f,[d]):f.options[c]?f.options[c]:void 0},k=function(){f=a.data(this,"wScratchPad"),f&&(f[c]?f[c].apply(f,[d]):void 0!==d?i():g.push(j()))};return this.each(k),g.length?1===g.length?g[0]:g:this}return c=a.extend({},a.fn.wScratchPad.defaults,c),this.each(e)},a.fn.wScratchPad.defaults={size:5,bg:"#cacaca",fg:"#6699ff",realtime:!0,scratchDown:null,scratchUp:null,scratchMove:null,cursor:"crosshair"},a.fn.bindMobileEvents=function(){a(this).on("touchstart touchmove touchend touchcancel",function(a){var b=a.changedTouches||a.originalEvent.targetTouches,c=b[0],d="";switch(a.type){case"touchstart":d="mousedown";break;case"touchmove":d="mousemove",a.preventDefault();break;case"touchend":d="mouseup";break;default:return}var e=document.createEvent("MouseEvent");e.initMouseEvent(d,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),c.target.dispatchEvent(e)})}}(jQuery);
$('#promo2').wScratchPad({
size : 5, // The size of the brush/scratch.
bg : '#cacaca', // Background (image path or hex color).
fg : '#6699ff', // Foreground (image path or hex color).
realtime : true, // Calculates percentage in realitime.
scratchDown : null, // Set scratchDown callback.
scratchUp : null, // Set scratchUp callback.
scratchMove : function (e, percent) {
// Show the plain-text promo code and call-to-action when the scratch area is 50% scratched
if ((percent > 50)) {
$('#promo1,#promo2').addClass('disabled');
}
}, // Set scratcMove callback.
cursor : 'crosshair' // Set cursor.
});.scratchpad{
height:50px;
width:50px}
.disabled , .disabled canvas{pointer-events:none!important;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="col-xs-4">
<div id="promo2" class="scratchpad"></div>
</div>
<script>
</script>