Question

我是html和javascript的新手所以卡在一些可能很简单的东西中，提前谢谢。我有一个140px到140px大小的图像，我有4个大小为70px到70px的div。 Div的排列如下

div1|div2
div3|div4

div之间没有距离。我想将图像拖动到div中，因为图像的面积等于所有4个div，我希望图像同时占用所有4个div。目前，图像只占用一个div，只是遮挡了其他视图（当置于div1中时），并放置在其他视图中时突出显示。

这是我的代码

            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（勇气之人）玩家库存的游戏

Answer 1

此技术称为“CSS image sprites”。您加载一个大图像，然后将其用作具有固定大小的多个div的背景。

使用CSS background-position:x y;剪切出您希望在每个div中可见的图像部分。

Answer 2

围绕所有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;
}

Answer 3

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

如何使图像同时占据多个div

3 个答案: