如何使用css和jQuery发现图像

我想首先用一个白色背景div覆盖图像。用户单击按钮后，覆盖div的一部分将被删除，以显示下面的部分图像

因此，如果将图像分为四个，当单击其中一个按钮时，它将删除jQuery中与该id相关的特定坐标集的z索引。我只是不知道如何使用css样式来实现这一点

以下是基本纲要：

<div id="buttons">
   <ul>
       <li id="0">button0</li>
       <li id="1">button1</li>
       <li id="2">button2</li>
       <li id="3">button3</li>
   </ul>
</div>
<div id="image">
    <div id="overlay"></div>
    <div id="reveal">
        <img src="http://science.nasa.gov/media/medialibrary/2010/03/31/sn_remnant_n63a.jpg/image_thumb" height="128" width="128"/>
    </div>
</div>
<style>
    #image{
        width: 128px;
        height: 128px;
        position: relative;
    }
    #overlay{    
        width:128px;
        height:128px;
        background-color:white;
        z-index: 10;
        position: absolute;
    }
</style>

按钮0
按钮1
按钮2
按钮3

#形象{
宽度：128px；
高度：128px；
位置：相对位置；
}
#覆盖{
宽度：128px；
高度：128px；
背景色：白色；
z指数：10；
位置：绝对位置；
}

为什么不用4个div覆盖它，每个div是图像的1/4

更新： 这可能会有帮助。不制作叠加，而是按像素坐标剪切图像

最好使用“表格”覆盖图像。 你可以有你想要的任意多的细胞。确保所有的宽度之和为128px，高度也为128px

下面是一个噱头：

在你的css中有这样的东西

   td.cover{
    /* specify widths and heights */
     background-color:white;
            z-index: 10;
            position: absolute;
        }

现在，当用户单击每个td时，从该元素中删除该类

在javascript中，从cdn导入JQuery

$('.cover').click(function(){
$(this).removeClass('cover');
})

---

以下是您想要做的：

我在覆盖层内创建了4个div，每个div覆盖图像的四分之一

在jQuery中，我说过当您单击一个按钮时，覆盖的相应部分将转到

可见性：hidden

，它保留了它所占用的空间，同时隐藏了div

编辑：您可以将覆盖层内的4个div设置为您想要的任何形状或大小，只要它们覆盖整个覆盖层（显然）。

有关答案，请参阅JSFIDLE

jQuery(function(){   
    jQuery('#0').click(function(){
        jQuery('#overlay1').toggle();
    });
    jQuery('#1').click(function(){
        jQuery('#overlay2').toggle();
    });
    jQuery('#2').click(function(){
        jQuery('#overlay3').toggle();
    });
    jQuery('#3').click(function(){
        jQuery('#overlay4').toggle();
    });
});

---

根据您在问题中提供的代码，您可以像这样处理它，但我相信有更优雅的方法可以做到这一点

工作样本：

#形象{
宽度：128px；
高度：128px；
位置：相对位置；
}
#叠加0，#叠加1，#叠加2，#叠加3{
宽度：128px；
高度：128px；
背景色：白色；
z指数：10；
位置：绝对位置；
}
#覆盖0{top:0；left:0；}
#覆盖1{顶部：0；左侧：64px；}
#覆盖2{顶部：64px；左侧：0；}
#覆盖3{顶部：64px；左侧：64px；}
函数showImage（id）{
$（id）.toggle（）；
}

您可以使用3行代码来完成此操作

演示

要获得更平滑的效果，请将其更改为

$('.outter').click(function(){
   $('#inner').animate({position:'absolute', top:'+=50px'});
});

---

我认为这并不像你希望的那么简单。这些方形面具多大？它们重叠吗？这是个好主意，我当然也考虑过。我只是想知道是否有一种方法可以通过坐标来改变div的一部分。如果你想通过坐标和任意大小的正方形来改变div的一部分，那么最好使用javascript来渲染正方形。像Raphael.js这样的库可能会有所帮助。你假设正方形不重叠，并且它们接触容器的边缘。好建议。但是，我仍然建议为此使用div。表应仅用于显示表格数据，而不用于布局目的。我同意这一点——我会避免类似的情况。我们不需要假设，我们也可以只指定单元格填充和边距属性，以便单元格彼此粘着。您可能需要研究委派事件：。它不太占用内存，因为您没有绑定4个事件处理程序。只有1个。我将把它简化为一个函数，但它看起来很棒。非常感谢，从现在起，我必须记住这一点。我将使用什么样的左/右/下/上排列方式来处理6个宽度为33.3%的覆盖层？

$('.outter').click(function(){
   $('#inner').css({position:'absolute', top:'+=50px'});
});

$('.outter').click(function(){
   $('#inner').animate({position:'absolute', top:'+=50px'});
});