coveringBad.min.js 图层遮挡拖动插件-BFW插件库

coveringBad.min.js 图层遮挡拖动插件

coveringBad.min.js 图层遮挡拖动插件，它能够创建一个可以拉动大小的元素，覆盖在原有的元素上面，从而进行更好的对比。

使用方式：

第一步加载bfwone

第二步use插件

第三步配置插件

参数	类型	默认值	说明
marginX	整数	30	拉手与左右边界的距离
marginY	整数	30	拉手与上下边界的距离
setX	整数	30	左边的位置
setY	整数	30	上边的位置
direction	字符串	horizontal	方向，可选 horizontal（水平方向）或 vertical（垂直方向）

示例如下：

<!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="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css">
    <script type="text/javascript">
        bready(function() {
            use(["coveringBad.min", "coveringBad"], function() {
            
                $('.covered2').coveringBad({
                    setX: 400,
                    setY: 235,
                    direction: "vertical"
                });
            });
        });
    </script>
    <style>
        .covered2 {
            width: 800px;
            height: 470px;
            margin: 0 auto;
            border: 25px solid #ddd;
        }
    </style>
</head>
<body>

    <div class="covered2" data-passive="//repo.bfw.wiki/bfwrepo/image/active_img.jpg" data-active="//repo.bfw.wiki/bfwrepo/image/pass_img.jpg">
        <div class="handle"></div>
        <div class="changeable"></div>
    </div>
</body>
</html>