マウス操作で消える画像を実装するプラグイン「Eraser」を紹介します。
jQueryプラグイン「Eraser」
このプラグインを使えば、指定した画像をマウスで操作するとマウスの軌跡に沿ったラインで画像を消すことができます。
2つの画像を重ねて、マウス操作で下の画像が表示する!といった機能をWebサイトに追加することができます。
それではでもページで消える画像をお楽しみください。
「Eraser」のデモ
ソース( HTML + jQuery )
< meta name = "description" content = "eraser のデモでーす。" > |
< title >eraser - jQuery Plugin Demo</ title > |
< p >< a href = "https://webkaru.net/jquery-plugin/eraser/" >「jQueryプラグインまとめ」に戻る</ a ></ p > |
< p >< a href = "#" onclick = "reset(event);" class = "box" >「リセット」</ a > ← 編集をリセット</ p > |
< img id = "robot" src = "img/red.png" /> |
< img id = "redux" src = "img/orange.png" /> |
< script src = 'https://code.jquery.com/jquery-2.1.1.min.js' ></ script > |
< script src = 'jquery.eraser.js' ></ script > |
addEventListener( "load", init, false ); |
$("#redux").eraser('reset'); |
jsファイルのダウンロード、その他のオプション詳細はこちらからどうぞ。