1

我正在尝试为一个大学项目制作一个拼图网站，而我想到的其中一个拼图让我有点发疯。我想让页面拍摄一张 png 图像，将其拆分为一堆 32 像素 x 34 像素的正方形，并让这些正方形在光标位于它们上方时消失。

这是我想要的粗略图： 粗略图 （忽略滑块的东西）

我发现的最接近的是本教程的某个部分，其中图像被分成不同的拼图块，但我似乎无法获取他使用的代码并对其进行返工以完成我需要做的事情。

我知道这可能是愚蠢的复杂和非常情境，但我不认为它应该太难......希望。

编辑：我没有尝试太多，因为我不是一个真正的 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>

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

4

1 回答 1

0

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

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

这和你正在寻找的东西一样吗？

于 2013-03-21T13:55:23.400 回答