jquery拖曳显示或隐藏图像插件coveringBad.js

 查看演示  website  立即下载

使用

包括:

<link href="css/coveringBad.css" type="text/css"/>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css"/>
<script src="js/coveringBad.js" ></script>

HTML:

<div class="covered">
    <div class="handle"></div>
    <div class="changeable"></div>
</div>

JS:

$(function() {
    $('.covered').coveringBad();
});

选项:

marginY : 20,   // Handle's distance from top and bottom
    marginX : 20,   // Handle's distance from left and right
    setX    : 30,   // Defulat location for handle from left
    setY    : 150,  // Defulat location for handle from top
    direction : "horizontal" // would be horizontal/vertical

增加

<div class="covered first">
    <div class="handle"></div>
    <div class="changeable"></div>
</div>
<div class="covered second">
    <div class="handle"></div>
    <div class="changeable"></div>
</div>
<div class="covered third">
    <div class="handle"></div>
    <div class="changeable"></div>
</div>

$(function() {
    $('.first').coveringBad();
    $('.second').coveringBad();
    $('.third').coveringBad({
        marginY : 20 ,
        marginX : 400 ,
        setX  : 400,
        setY  : 235 ,
        direction   : "vertical"
    });
});

PREVIOUS:
NEXT:
jQuery生成小的世界地图插件SmallWorld.js
jQuery移动列表插件Editable Listview