• 主题更新一下,修复了头像挂掉的问题

  • 后羿更新网站文章可能不会那么闲了

  • 不得不说,美国贴吧的界面真是难看到死

  • 看到网上新闻美国的贴吧将成为中国公司

  • 推送试试

  • 睡觉之前测试一下

  • 发现了一个非常不错的插件

  • 经过确认,微软的必应搜索在中国被屏蔽

  • 给主题增加一个阿里云的代码库

  • 正式通知一下,有赞支付已经停止业务了

jQuery.eraser – jQuery橡皮擦插件

网络技术 云落 5年前 (2014-10-17) 696次浏览 2个评论 扫描二维码
文章目录[隐藏]

jQuery.eraser – jQuery橡皮擦插件

演 示   下 载

简介

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

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

浏览器兼容

jQuery.eraser – jQuery橡皮擦插件 jQuery.eraser – jQuery橡皮擦插件 jQuery.eraser – jQuery橡皮擦插件 jQuery.eraser – jQuery橡皮擦插件 jQuery.eraser – jQuery橡皮擦插件
IE9+ ✔ Chrome ✔ Firefox ✔ Opera ✔ Safari ✔

使用方法

1、引入文件

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

2、HTML

<div class="dowebok">
    
    
</div>

3、CSS

* {
    margin: 0;
    padding: 0;
}
.dowebok {
    position: relative;
    width: 700px;
    height: 438px;
    margin: 0 auto;
}
.dowebok img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
#redux {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

4、JavaScript

$(function(){
    $('#redux').eraser();
});

配置

属性/方法 类型 默认值 说明
size 整数 40 橡皮擦大小
completeRatio 浮点数 0.7 擦出比率
completeFunction 函数 null 配合 completeRatio 使用,达到擦出比率后的函数
progressFunction 函数 null 擦出后的回调函数,他接收一个参数,为擦出后的比率(0.0 – 1.0)
reset 重置,即还原成未擦出的状态,如:$(‘#yourImage’).eraser(‘reset’);
clear 清除,如:$(‘#yourImage’).eraser(‘clear’);

演 示   下 载


-- 完 --
jQuery.eraser – jQuery橡皮擦插件
扫码订阅,第一时间获得更新
微信扫码二维码,订阅我们网站的动态,另外不定时发送 WordPress 小技巧,你可以随时退订,欢迎订阅哦~

极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:jQuery.eraser – jQuery橡皮擦插件

极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:jQuery.eraser – jQuery橡皮擦插件
喜欢 (2)
[sp91@qq.com]
分享 (0)
云落
关于作者:
无折腾,不生活,我是一个WordPress菜鸟,一个玩淘宝的卖家,欢迎你认识我,我是云落!
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址