» » Use JQuery to realize scratch cards with different cursors

 

Use JQuery to realize scratch cards with different cursors

Author: bamboo06 on 31-10-2014, 02:44, views: 4382

2
Few days ago, we write two articles about creating scratch cards effect by HTML5 canvas tag.
You can refer to them:
Use HTML5 to achieve scratchcard effect
Use HTML5 canvas to creat scratch card effect
Today we show you another way to make scratch card effect using jquery and wScratchPad.js, example shows as follows:


HTML

  <div id="demo1" class="scratchpad"></div>
  <div id="demo2" class="scratchpad"></div>
  <div id="demo3" class="scratchpad"></div>
  <input type="button" value="Reset" onclick="$('.scratchpad').wScratchPad('reset');"/>
  <input type="button" value="Clear" onclick="$('.scratchpad').wScratchPad('clear');"/>
  <input type="button" value="Enable" onclick="$('.scratchpad').wScratchPad('enable', true);"/>
  <input type="button" value="Disable" onclick="$('.scratchpad').wScratchPad('enable', false);"/>

Style CSS

  <style>
    #demo1, #demo2, #demo3 {
      width: 25%;
      height: 100px;
      border: solid 1px;
      display: inline-block;
    }
  </style>

Scripts used in the page, including different cursors:
    // Test 1
    $('#demo1').wScratchPad({
      scratchMove: function (e, percent) {
        console.log(percent);
      }
    });

    // Test 2
    $('#demo2').wScratchPad({
      bg: 'images/slide1.jpg',
      fg: '#ff0000',
      scratchMove: function (e, percent) {
        console.log(percent);

        if (percent > 70) {
          this.clear();
        }
      }
    });
    $('#demo2').wScratchPad('cursor', 'url("cursors/coin.png") 5 5, default');

    // Test 3
    $('#demo3').wScratchPad({
      cursor: 'url("cursors/mario.png") 5 5, default',
      scratchMove: function (e, percent) {
        console.log(percent);
      }
    });
    $('#demo3').wScratchPad('bg', 'images/winner.png');
    $('#demo3').wScratchPad('fg', 'images/scratch-to-win.png');
    $('#demo3').wScratchPad('size', 10);


Don't forget you need to include js file before the body area:

<script type="text/javascript" src="wScratchPad.js">

Category: Javascript

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
<
  • 4 Comments
  • 0 Articles
24 December 2017 09:37

JordanDean

Reply
  • Group: Members
  • –†Registered date: 24.12.2017
  • Status: Currently Offline
 
This is so interesting! We have to try it with https://www.linkedin.com/company/edusson and I'll tell you how it works. Thank you for your tips. All the best!

<
  • 0 Comments
  • 0 Articles
15 February 2018 17:52

Rodger C. Swartz

Reply
  • Group: Guests
  • –†Registered date: --
  • Status:
 
I was very much confused with the coding part when I read your article. I am non computer student and don`t know what this coding really mean off. As, I am literature student, do write articles for different expert writers blog in my free time. I am planning to take this as my profession too.

Information
Comment on the news site is possible only within (days) days from the date of publication.