0

我想最初用白色背景 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>
4

6 回答 6

0

为什么不用 4 个 div 覆盖它，每个 (1/4) 图像？

更新： 这可能会有所帮助。无需进行叠加，而是按像素坐标切割图像。

通过 Javascript 将图像切割成碎片

于 2013-08-08T20:32:42.560 回答
0

最好使用“表格”来覆盖图像。您可以在其中包含任意数量的单元格。确保所有 's 的宽度总和为 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');
})
于 2013-08-08T20:34:28.500 回答
0

这是你想要做的：http: //jsfiddle.net/YYfJ2/1/

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

在 jQuery 中，我说过当你点击一个按钮时，相应的覆盖部分会转到visibility: hidden，它保留了它占用的空间，同时隐藏了 div。

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

于 2013-08-08T20:39:25.497 回答
0

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();
    });
});
于 2013-08-08T20:46:12.350 回答
0

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

工作示例：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>
于 2013-08-08T20:52:45.463 回答
0

你可以用 3 行代码做到这一点

演示http://jsfiddle.net/kevinPHPkevin/vNfv6/

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

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

$('.outter').click(function(){
   $('#inner').animate({position:'absolute', top:'+=50px'});
});
于 2013-08-08T21:10:27.673 回答