刮刮乐jquery插件:wScratchPad
完整项目资源下载:点击打开链接
运用wScratchPad插件非常快弄出刮刮乐的效果,代码例如以下:
<!DOCTYPE html>
<html>
<head>
<meta CHARSET="UTF-8">
<title>刮刮乐</title>
<script type="text/javascript" src="./inc/jquery.1.8.2.min.js"></script>
<script type="text/javascript" src="./wScratchPad.js"></script>
</head>
<div id="scratchpad" style="display:inline-block; position:relative;"></div>
<script type="text/javascript">
$("#scratchpad").wScratchPad({
width:'150',height:'40',color : "#a9a9a7",
scratchMove: function(e, percent)
{
if(percent > 70)
this.clear();
},
});
</script>
</body>
</html>
但是后面用到项目时,发如今三星note3里面根本刮不了,网上搜问题,折腾了好久,改写例如以下代码:
<!DOCTYPE html>
<html>
<head>
<meta CHARSET="UTF-8">
<title>刮刮乐</title>
<script type="text/javascript" src="./inc/jquery.1.8.2.min.js"></script>
<script type="text/javascript" src="./wScratchPad.js"></script>
</head>
<div id="scratchpad" style="display:inline-block; position:relative;"></div>
<script type="text/javascript">
var useragent = window.navigator.userAgent.toLowerCase();
$("#scratchpad").wScratchPad({
width:'150',height:'40',color : "#a9a9a7",
scratchMove: function(e, percent)
{
if (useragent.indexOf("android 4") > 0)
{
$("#scratchpad").css("color", "rgb(50,50,50)");
if ($("#scratchpad").css("color").indexOf("51") > 0)
{
$("#scratchpad").css("color", "rgb(50,50,50)");
}
else if($("#scratchpad").css("color").indexOf("50") > 0)
{
$("#scratchpad").css("color", "rgb(51,51,51)");
}
}
if(percent > 70)
this.clear();
},
});
</script>
</body>
</html>
完整项目资源下载:
点击打开链接