eraser.js jquery橡皮擦插件-BFW插件库

eraser.js jquery橡皮擦插件

jquery.eraser.js jquery橡皮擦插件

第一步引入bfwone

第二步执行插件

示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["jquery.eraser-0.5.1"], function() {
                $('#redux').eraser({
                    progressFunction: function(p) {
                        $('#progress').html(Math.round(p*100) + '%');
                    }
                });

                $('.reset').on('click', function() {
                    $('#redux').eraser('reset');
                    $('#progress').html('0%');
                });

                $('.clear').on('click', function() {
                    $('#redux').eraser('clear');
                    $('#progress').html('100%');
                });
            });
        });
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .bfwcont {
            position: relative;
            width: 700px;
            height: 438px;
            margin: 0 auto;
        }
        .bfwcont img {
            position: absolute;
            left: 0;
            top: 0;
        }
        #robot {
            z-index: 1;
        }
        #redux {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
        }
        #progress {
            position: absolute;
            right: 10px;
            top: 10px;
            z-index: 3;
            color: #fff;
        }
    </style>
</head>
<body>
    <h1>jQuery橡皮擦插件jQuery.eraser演示</h1>

    <div class="bfwcont">
        <img src="/bfwrepo/image/era_1.jpg" alt="">
        <img id="redux" src="/bfwrepo/image/era_2.jpg" alt="">
        <span id="progress">0%</span>
    </div>

    <p class="dowebok-explain">
        请在图片中按住鼠标左键不放，并移动查看效果
    </p>

    <p class="vad">
        <a class="reset" href="javascript:">重 置</a> <a class="clear" href="javascript:">清 除</a>
    </p>
</body>
</html>

eraser.js jquery橡皮擦插件

网友评论0

jquery.qrcode.min.js

cropper.js

pix.0.8.5.min.js

compressphoto.js

jquery.photoClip.js

croppie.js

Jcrop.js

jquery.jqzoom.js

elastislide.js

smoothproducts.js