先看效果:
这个是商用案例,有需求的朋友可以百度:南京spark 联系我们
本次我们使用剥离后的纯粹的功能的代码讲解,先看效果
1、引入jquery文件
<script type="text/javascript" src="jquery.1.9.1.min.js"></script>
2、引入 插件
<script type="text/javascript" src="wScratchPad.js"></script>
3、jQuery代码
<script type="text/javascript">
//wScratchPad2 就是要放效果的DIV 的ID
$("#wScratchPad2").wScratchPad({
color: 'grey',//覆盖的刮刮层的颜色
image: 'images/slide1.jpg', //刮奖结果图片
cursor: 'images/mario.png' //刮的笔刷图片
});
</script>
4、HTML代码其实就一句
<div id="wScratchPad2" style="display:inline-block; position:relative; border:solid black 1px;"></div>
最后完整代码下载地址: demo