Question

有人可以解释我如何使用css从数组中定位图像？我把它们放在页面顶部的一行中，但是我想要手动定位它们，就像我可以用类做的那样，例如

.twelfth {
    position:absolute; 
    top: 35%; 
    left: 75%;
    z-index:2;
}

这是我目前的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Hello</title>
    <link rel="stylesheet"
          href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="stils.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <script>
        function random_imglink(select) {
            if (select > 5) {
            }
            var myimages = new Array();
            myimages[0] = "monalisa.jpg"
            myimages[1] = "monalisa.jpg"
            myimages[2] = "monalisa.jpg"
            myimages[3] = "monalisa.jpg"
            myimages[4] = "monalisa.jpg"
            myimages[5] = "monalisa.jpg"
            myimages[6] = "monalisa.jpg"
            myimages[7] = "monalisa.jpg"
            myimages[8] = "monalisa.jpg"
            myimages[9] = "monalisa.jpg"
            myimages[10] = "monalisa.jpg"
            myimages[11] = "monalisa.jpg"
            myimages[12] = "monalisa.jpg"

            //specify corresponding links below
            var imagelinks = new Array()
            imagelinks[0] = "http://www.facebook.com"
            imagelinks[1] = "http://www.w3schools.com"
            imagelinks[2] = "http://www.microsoft.com"
            imagelinks[3] = "http://www.dynamicdrive.com"
            imagelinks[4] = "http://www.freewarejava.com"
            imagelinks[5] = "http://www.tutorialspoint.com"
            imagelinks[6] = "http://www.netscape.com"
            imagelinks[7] = "http://www.codepen.io"
            imagelinks[8] = "http://www.youtube.com"
            imagelinks[9] = "http://www.imdb.com"
            imagelinks[10] = "http://www.google.com"
            imagelinks[11] = "http://www.apple.com"
            imagelinks[12] = "http://www.skype.com"
            var size = myimages.length

            for (var i = 0; i < select; i++) {
                var index = Math.floor(Math.random() * size);
                document.write('<a href=' + '"' + imagelinks[index] + '"' + '><img src="' + myimages[index] + '" border=0  width="10%"></a>');

                var tmp = myimages[index];
                myimages[index] = myimages[size - 1];
                myimages[size - 1] = tmp;

                tmp = imagelinks[index];
                imagelinks[index] = imagelinks[size - 1];
                imagelinks[size - 1] = tmp;
                --size;
            }
        }
        random_imglink(12);
    </script>
</body>
</html>

Answer 1

创建一个json对象数组，如：

var images = new Array();
images.push({'name' : 'xyz.png', 'link' : 'http://example.com', 'left' : '', 'top' : ''});

基本上，您可以添加要添加的任何变量属性。然后遍历这个数组。

Answer 2

你正在寻找这样的东西吗？ https://css-tricks.com/almanac/selectors/n/nth-child/

a:nth-child(12) {
   position:absolute; 
   top: 35%; 
   left: 75%;
   z-index:2;
}

从阵列定位图像

2 个答案: