本篇文章为大家展示了怎么在jQuery中使用eraser插件,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
创新互联公司专注于网站建设|成都网站维护|优化|托管以及网络推广,积累了大量的网站设计与制作经验,为许多企业提供了网站定制设计服务,案例作品覆盖成都汽车玻璃修复等行业。能根据企业所处的行业与销售的产品,结合品牌形象的塑造,量身建设品质网站。
eraser插件简介:
1.jQuery.eraser 是一个基于 jQuery 的插件,它的效果类似于橡皮擦,按住鼠标不放,在图片上面来回移动,上面灰色的图片就会被擦出,显示出下面彩色的图片。
2.jQuery.eraser 的原理其实是有灰色、彩色两张图片(都需要自己事前准备),将灰色的图片装载于一个 canvas 中,然后和彩色的图片用 CSS 定位在同一个位置,并设置 z-index 使 canvas 位于彩色图片之上。当按住鼠标并在 canvas 上来回移动时,就出现了类似橡皮擦擦出的效果。
eraser使用方法:
1.引入文件
2.HTML
3.CSS
*{ margin: 0px; padding: 0px; } #box{ width: 400px; position: relative; margin-left: 50%; left: -200px; } #box img{ width: 100%; height: auto; position: absolute; float: left; z-index: 1; } #cover{ width: 100%; height: auto; position: absolute; float: left; z-index: 999; }
4.JavaScript
$(function(){ $('#cover').eraser(); });
5.更多配置选项
//设置擦出画笔的大小 $('#cover').eraser({size:80});
//点击"重置"按钮,将画布重置 $('#reset').click(function(){ $('#cover').eraser('reset'); });
//点击"清除"按钮,将整块画布擦除 $('#remove').click(function(){ $('#cover').eraser('clear'); });
//当擦出率达到50%的时候,调用函数 $('#cover').eraser({ completeRatio: 0.1, completeFuction:function(){ alert("擦除已经达到50%"); } });
6.注意事项
需要说明的是,如果想设置画笔的大小,设置擦除一定比例之后调用一个函数,要在初始化画布的时候一同设置。例如:
$('#cover').eraser({ size:80, completeRatio:0.5, completeFunction:function(){ alert(666); } });
上述内容就是怎么在jQuery中使用eraser插件,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。