Demo 1 - Default options
Scratch below (with left mouse button down) to see the image!
This is the javascript code to launch jScratchcard with standard options:
$("#card1").jScratchcard();
Demo 2 - jScratchcard with gold card and callback function
Scratch below (with left mouse button down) to see the image!
This is the javascript code to launch jScratchcard text color demo:
var callBack = function() {
alert('ok');
};
$("#card2").jScratchcard({
opacity: 0.5,
color: '#D4A017',
stepx: 15,
stepy: 15,
callCallbackPerc: 50,
callbackFunction: callBack
});
Demo 3 - jScratchcard with silver card, no buttom mouse necessary)
Scratch below (without mouse button down) to see the image!
This is the javascript code to launch jScratchcard background-color demo:
$("#card3").jScratchcard({
opacity: 0.05,
color: '#98AFC7',
stepx: 20,
stepy: 20,
mousedown: false
});
Documentation
To use this jquery plugin:
- download jquery.jScratchcard.js and images files
- download last version of jquery.js
- include the js in the head section of the page:
...
...
- in the read function launch the jScratchcard (Scratchcard effect on image) relative at your element:
Parameters:
- opacity - opacity step when hover - default {'opacity': 0.2}
- color - start background color - default {color: '#666666'}
- stepx - x block dimension - default {stepx: 10}
- stepy - y block dimension - default {stepy: 10}
- mousedown - if true the left button of mouse must be down - default {mousedown: true}
- callCallbackPerc - if valorized is the percent at which call callback - default: false
- callbackFunction - callback function - default null
For comments
see the blog page.
Download
You can download the entire archive:
- jScratchcard.zip - a zip archive containing the plugin source, a minified version of jQuery and a demo page.
Or single file:
original posted by: http://www.senamion.com/blog/jScratchcard.html
Posted in:
