1

我是 html 和 javascript 的新手，所以遇到了一些可能很简单的事情，在此先感谢。我有一个 140 像素 x 140 像素大小的图像，我有 4 个 70 像素 x 70 像素的 div。div的排列如下

div1|div2
div3|div4

div之间没有距离。我想将图像拖到 div 中，由于图像的面积等于所有 4 个 div，我希望图像同时占据所有 4 个 div。目前，图像仅占据一个 div，并且仅在视图中遮挡其他图像（当放置在 div1 中时），并且在放置在其他 div 中时会突出。

这是我的代码

            function allowDrop(ev)
            {
                ev.preventDefault();
            }

            function drag(ev)
            {
                ev.dataTransfer.setData("Text",ev.target.id);
                abc=ev.dataTransfer.getData("Text");
            }

        function drop(ev)
        {

                if(abc="image4x4")
                {
                      ev.preventDefault();
                  var data=ev.dataTransfer.getData("Text");
                                  ev.target.appendChild(document.getElementById(data));

            }
        }
    </script>
    <style>
        .divclass0
        {
            height:200px;
            width:200px;
            border:1px solid;

        }
        .divclass
        {
            height:200px;
            width:200px;
            border:1px solid;
            margin-left:201px;
            margin-top:-202px
        }
        .divclass1
        {
            height:70px;
            width:70px;
            border:1px solid;

        }
        .divclass2
        {
            height:70px;
            width:70px;
            border:1px solid;

        }
        .imageclass
        {
            height:140px;
            width:140px;
        }
        .divclass1b
        {
            height:70px;
            width:70px;
            border:1px solid;
            margin-left:71px;
            margin-top:-72px;
        }
        .divclass2b
        {
            height:70px;
            width:70px;
            border:1px solid;
            margin-left:71px;
            margin-top:-72px;
        }

    </style>
</head>
<body>
    <div class="divclass0" id="div0" ondrop="drop(event)"; ondragover="allowDrop(event)">
        <img id="image4x4" class="imageclass" src="tree2.jpg" draggable="true" ondragstart="drag(event)">
    </div>
    <div class="divclass" id="div0" ondrop="drop(event)"; ondragover="allowDrop(event)">
        <img id="image1x1" class="imageclass2" src="smiley3.png" draggable="true" ondragstart="drag(event)">
    </div>
    <div class="divclass1" id="div1" ondrop="drop(event)"; ondragover="allowDrop(event)">

    </div>
    <div class="divclass1b" id="div1(b)" ondrop="drop(event)"; ondragover="allowDrop(event)">

    </div>

    <div class="divclass2" id="div2" ondrop="drop(event)"; ondragover="allowDrop(event)">

    </div>
    <div class="divclass2b" id="div2(b)" ondrop="drop(event)"; ondragover="allowDrop(event)">

    </div>

实际上，div 应该是我游戏中玩家的库存单位。我想限制库存物品的数量，就像在名为 commandos2（勇敢的人）玩家库存的游戏中一样

4

3 回答 3

3

这种技术被称为“ CSS 图像精灵”。您加载一个大图像，然后将其用作几个div具有固定大小的背景。

使用 CSSbackground-position:x y;剪切出您希望在每个div.

于 2013-10-31T08:47:07.990 回答
1

围绕所有 4 个 div 创建一个 div 给这个position:relative; 然后你可以添加一个图像并给这个position:absolute;

像这样：

<div id="container">
    <div class="div1">
        <img src="http://s9.postimg.org/o4vm98saz/test.png" alt="Test image" />
    </div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
</div>

CSS：

#container {
    position:relative;
    width:100px;
    height:100px;
}
.div1, .div2, .div3, .div4 {
    width:50px;
    height:50px;
    float:left;
}
.div1 img {
    position:absolute;
    top:0;
    bottom:0;
}
于 2013-10-31T08:52:36.440 回答
0

将所有 div 放在一个 div 中，并将您的图像作为该 div 的背景。我认为不需要精灵。

于 2013-10-31T08:55:23.607 回答