Question

我想最初用图像覆盖白色背景div的图像。在用户点击按钮后，将删除重叠div的一部分以显示下面的部分图像。

因此，如果图像被分成四个，当单击其中一个按钮时，它将删除与jQuery中该id相关的特定坐标集的z-index。我只是不知道如何使用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>

Answer 1

为什么不用图像的每个（1/4）将4个div叠加？

<强>更新这可能会有所帮助。而不是制作叠加层，按像素坐标切割图像。

Cutting an Image into pieces through Javascript

Answer 2

最好使用“表格”来覆盖图像。你可以根据需要拥有尽可能多的单元格。确保所有宽度的总和是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');
})

Answer 3

以下是您要执行的操作：http://jsfiddle.net/YYfJ2/1/

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

在jQuery中，我说当你点击一个按钮时，相应的叠加层会转到visibility: hidden，这会保留占用的空间，同时隐藏div。

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

Answer 4

http://jsfiddle.net/NdD8E/

查看答案的jsfiddle。

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();
    });
});

Answer 5

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

工作样本：http://jsfiddle.net/9QTPX/1/

<style>
#image{
    width: 128px;
    height: 128px;
    position: relative;
}
#overlay0,#overlay1,#overlay2,#overlay3{    
    width:128px;
    height:128px;
    background-color:white;
    z-index: 10;
    position: absolute;
}
#overlay0{top: 0; left: 0;}
#overlay1{top: 0; left: 64px;}
#overlay2{top: 64px; left: 0;}
#overlay3{top: 64px; left: 64px;}
</style>

<script>
function showImage(id) {
    $(id).toggle();
}
</script>

<div id="buttons">
   <ul>
       <a href="#" class="btn" onclick="showImage('#overlay0');">button0</a>
       <a href="#" class="btn" onclick="showImage('#overlay1');">button1</a>
       <a href="#" class="btn" onclick="showImage('#overlay2');">button2</a>
       <a href="#" class="btn" onclick="showImage('#overlay3');">button3</a>
   </ul>
</div>

<div id="image">
    <div id="overlay0"></div>
    <div id="overlay1"></div>
    <div id="overlay2"></div>
    <div id="overlay3"></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>

Answer 6

您可以使用3行代码执行此操作

DEMO http://jsfiddle.net/kevinPHPkevin/vNfv6/

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

为了更顺畅的效果，请将其更改为

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

如何使用css和jQuery发现图像

6 个答案: