Question

我目前正在使用.onload在浏览器打开时随机排列图像。当页面被加载时，图像随机地传播＆＃34;到页面上。单击它们时，它们将被带到屏幕上的特定坐标。第一张图片是回收箱。我希望这个图像成为中心图像，并让所有其他图像进入其中（或者在这种情况下＆＃34;后面＆＃34;它）。我应该为每个单独的图像设置z-index吗？这就是我所拥有的：

任何建议都有帮助！

<html>

<head>
<style>
    body{
        padding: 0;
        margin: 0;   
    }

    div{
        position: fixed;
        top: 0;
        left: 300;
        width: 35%;
        height: 35%;
        float: left;
        transition: width 5s, top 5s, left 5s;
    }

    div:hover{
        width: 100%;
    }


</style>
</head>


<body>
   <div class="div">
    <a target="_blank">
     <img src="curbside%20collection%20empty%20yellow%20bin.png" alt= width=100% height=100%>
    </a>
   </div>


   <div class="div">
    <a target="_blank">
     <img src="Bomb.png" alt= width=50% height=50%>
    </a>
   </div>

   <script>
    document.body.onload = function() {
        var mycolours = [];
        var elements = 
        document.getElementsByTagName("div");
        for(var i = 0; i < elements.length; i++){
            elements[i].style.backgroundColor =
                mycolours[i%mycolours.length]; // remainder operator magic
                    elements[i].style.top = Math.random() * innerHeight;
                    elements[i].style.left = Math.random() * innerWidth;

            elements[i].onclick = function(){
                console.log(this.style.top);

                if(this.style.top === "300px"){
                    this.style.top = Math.random() * window.innerHeight;
                    this.style.left = Math.random() * window.innerWidth;
                }

                else{
                    this.style.top = 300;
                    this.style.left = 500;
                }       
              }
         }
    }
</script>

</body>
</html>

Answer 1

我建议使用class，而不是必须设置每个图像z-index这样你就可以设置你的图像类的属性了有一个z-index然后你还可以有另一个类回收箱

我也相信您目前使用class是错误的。

为了在CSS中选择带有类的DOM元素，您应该使用.（句点）作为前缀。您使用CSS的方式是选择div DOM元素

即

#div { //properties of the element with "div" as the ID }
.div { //properties of all elements with the "div" class }
div  { //properties of <div> elements }

请记住 - 类可以应用于DOM内的多个元素，但ID只能应用于DOM内的一个元素。

在安排这些图像时如何使用z-index（或我应该使用）？

1 个答案: