JQuery:拆分图像并导致拆分在鼠标悬停时消失

Question

我正在尝试为一个大学元素制作一个谜题网站，我想到的其中一个谜题让我有点抓狂。我想让页面采用 png 图像，将其分成一堆 32px x 34px 的正方形，当光标位于这些正方形上方时，这些正方形消失。

这是我想要的粗略图表: Rough Diagram(忽略 slider 的东西)

我找到的最接近的是 this tutorial 的某个部分图像被分成不同的拼图 block ，但我似乎无法采用他使用的代码并对其进行修改以完成我需要做的事情。

我知道这可能非常复杂并且非常有情境，但我认为它不应该太难......希望如此。

编辑:我没有尝试太多，因为我在任何方面都不是真正的 jQuery 用户或编码员。到目前为止我用过的东西我几乎不明白，可能不会有多大用处，但我可以发布它。

我制作了一个名为 image_split.js 的 .js 文件，它包含以下内容:

(function($)
{
    $.fn.jSplit=function(options)
{
                var piece=$('<span></span>').addId("curtain" +     this.id.substring(4)).css(
        {
            'width': 32+'px',
            'height': 34+'px',
            'display': 'inline-block',
            'float': 'left',
            'background-image': 'url("images/curtain.png")',
            'background-position': (-32)+'px '+(-34)+'px',
        })
};
})(jQuery);

然后在 HTML 中调用它。

<script>            
        $(document).ready(function() {
            $('#actor').jSplit();
        });
</script>

那是为了分割图像。至于让它消失，我有这个:

<script type="text/javascript">
      $(document).ready(function() {
          $("div[id^=curtain]").hover(
            function(){
                $("#curtain" + this.id.substring(4)).css({"visibility":"visible"});
            },
            function(){
                $("#curtain" + this.id.substring(4)).css({"visibility":"hidden"});
            }
        );
      });
</script>

我知道它不起作用，我确信所有这些代码都很糟糕，但我想如果它对你们有帮助就更好了。

Answer 1

听起来你有点基础，但是没有生成的 html，很难给出正确的答案，不过我会尽力而为。我已经包含了一个带有示例的 JSFiddle。我不完全确定你是如何添加 <span> 的标签，但是我很懒，所以我在 jQuery 中处理了它。

http://jsfiddle.net/vmex151/xvvvy/

这就是您正在寻找的东西吗？