jQuery橡皮擦插件 - jQuery.eraser

导语 简介jQuery eraser 是一个基于 jQuery 的插件,它的效果类似于橡皮擦,按住鼠标不放,在图片上面来回移动,上面灰色的图片就会被擦出,显示出下面彩色的图片。jQuery eraser 的原理其实是有灰色、彩色两张图

jQuery橡皮擦插件

简介

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

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

浏览器兼容

IE Chrome Firefox Opera Safari
IE9+ ✔ Chrome ✔ Firefox ✔ Opera ✔ Safari ✔

使用方法

1、引入文件

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

2、HTML

<div class="aseoe">
    <img src="images/1.jpg" alt="">
    <img id="redux" src="images/2.jpg" alt="">
</div>

3、CSS

* {
    margin: 0;
    padding: 0;
}
.aseoe {
    position: relative;
    width: 700px;
    height: 438px;
    margin: 0 auto;
}
.aseoe 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’);
 

http://www.aseoe.com/ true jQuery橡皮擦插件 - jQuery.eraser http://www.aseoe.com/show-79-720-1.html report 1806.5 简介jQuery eraser 是一个基于 jQuery 的插件,它的效果类似于橡皮擦,按住鼠标不放,在图片上面来回移动,上面灰色的图片就会被擦出,显示出下面彩色的图片。jQuery eraser 的原理其实是有灰色、彩色两张图
TAG:jQuery 橡皮擦 插件
本站欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明: 文章转载自:爱思资源网 http://www.aseoe.com/show-79-720-1.html
[ 扫一扫,在手机上阅读 ]

[前端插件推荐] Plugin

1 2 3 4
  • jQuery实现逐字逐句显示插件l-by-l.min.js
  • jQuery带方向感知的鼠标滑过图片边框特效插件
  • jQuery HotKeys监听键盘按下事件keydown插件
  • 响应式无限轮播jQuery旋转木马插件
响应式无限轮播jQuery旋转木马插件
web前端开发
爱思资源网 Copyright 2012-2014 Www.Aseoe.Com All rights reserved.(晋ICP备13001436号-1)