开发者社区> 振礼硕晨> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jQuery擦除插件eraser

简介: eraser插件简介: jQuery.eraser 是一个基于 jQuery 的插件,它的效果类似于橡皮擦,按住鼠标不放,在图片上面来回移动,上面灰色的图片就会被擦出,显示出下面彩色的图片。
+关注继续查看

eraser插件简介:

  1. jQuery.eraser 是一个基于 jQuery 的插件,它的效果类似于橡皮擦,按住鼠标不放,在图片上面来回移动,上面灰色的图片就会被擦出,显示出下面彩色的图片。
  2. jQuery.eraser 的原理其实是有灰色、彩色两张图片(都需要自己事前准备),将灰色的图片装载于一个 canvas 中,然后和彩色的图片用 CSS 定位在同一个位置,并设置 z-index 使 canvas 位于彩色图片之上。当按住鼠标并在 canvas 上来回移动时,就出现了类似橡皮擦擦出的效果。

eraser使用方法:

1.引入文件

<script src="js/jquery.min.js"></script>
<script src="js/jquery.eraser.js"></script>

2.HTML

<div id="box">
    <img id="real" src="img/real.jpg" alt="底部">
    <img id="cover" src="img/cover.jpg" alt="上部">
</div>

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图片查看器插件Viewer.js
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/w178191520/article/details/84179587 简介 Viewer.
1884 0
一起谈.NET技术,分享在MVC3.0中使用jQuery DataTable 插件
  前不久在网络上看见一个很不错的jQuery的DataTable表格插件。后来发现在MVC中使用该插件的文章并不多。本文将介绍在MVC3.0如何使用该插件。在介绍该插件之前先简单介绍一下,推荐该插件的原因。
896 0
8款超赞的最新jQuery插件工具
jQuery是迄今为止我最喜欢的Javascript框架,开发者用jQuery创造出惊人的视觉效果,以及处理数据,等等。 在这篇文章中,我给所有web开发人员推荐8款超赞的jQuery插件工具。 1.jQuery Mobile 由于iPhone和BlackBerry移动设备的普及,网络趋向于移动,jQuery Mobile是一个完整的框架,让您轻松地创建移动网站。
965 0
9款jQuery插件为你的网站增加亮点
jQuery现在已经有一统ajax框架的趋势,或许日后将成为ajax的标准框架也难说。本文向你推荐9款jQuery插件,使用这些插件可使你的网站增色不少。 开始吧! 1.Sticky Sidebar:当页面向下滚动时,右边的购物车信息是跟着往下滚动的,像新浪微博的新粉丝提示,非常好。
757 0
推荐11款jQuery的复选框和单选框美化插件
英文出处: jQuery Plugins for Styling Checkbox & Radio Buttons
788 0
【推荐】用于UI和表单设计的10款jQuery插件
本文搜集了一些有用的用户界面和架构设计工具。包含架构验证器、文件上传以及UI工具包。 1.A Better Form 这款插件有助于清除垃圾评论、垃圾邮件和自动提交表单。 在线演示 2.3 State Switch Plugin 此款插件可切换至三种状态。
1347 0
【推荐】10款优秀的jQuery图片插件
本文收集了一些新鲜、有趣的jQuery插件,这些插件可用来执行不同的动画和图片效果。 1.AJAX-ZOOM 这个插件很有趣,可自动缩放镜头,同时也可转换成3D效果。在线演示 2.Transformable 尽可能的变换图像:旋转、倾斜、缩放(可用于DIV)。
1283 0
+关注
振礼硕晨
爱学习,爱设计
文章
问答
文章排行榜
最热
最新
相关课程
更多
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载