在我的网站中,我正在研究字体的抽象。 每个图像src都是随机的“字母”,我想在图像源的下方加上 exact 字母的标题。但是,图像的显示是随机的。
类似的东西;如果此div包含特定的img,则使用(this)img标题。并为属于同一组的每个图像和标题执行此操作。
或制作无花果标题类,并在存在某个img的情况下显示或隐藏它们,但这将是很多工作,并且会变得非常混乱。
也许我也在想太多,因为如果图像的链接不正确,它将显示图片的确切路径,包括带有扩展名的名称,这使我认为在下面显示图像很容易?
代码,我还没有尝试过,但是查看它的设置可能会很有用。
https://jsfiddle.net/7dn3j5qL/1/
我用过的javascript
$('.test').each(function() {
var num = Math.floor(Math.random() * 26 + 1),
img = $(this);
img.attr('src', 'img/number'+num+'.gif');
img.attr('alt', 'Src: '+img.attr('src'));
});
css
body{
}
.container1{
width: 1425px;
height: 100%;
position: absolute;
background-color: pink;
}
.container1 img{
width: 75%;
margin-left: auto;
margin-right: auto;
display: block;
}
.container{
position: absolute;
width: 1425px;
height: 2262px;
text-align: center;
}
.image1{
width: 520px;
height:300px;
margin-top:50px;
margin-left: auto;
margin-right: auto;
display: inline-block;
overflow: hidden
background-color:red;
}
.image2{
width: 400px;
height:231px;
vertical-align: top;
display: inline-block;
background-color:red;
}
.image3{
width: 268px;
height:155px;
vertical-align: top;
display: inline-block;
background-color:red;
}
.image4{
width: 199px;
height:115px;
vertical-align: top;
display: inline-block;
background-color:red;
}
.image5{
width: 158px;
height:91px;
vertical-align: top;
display: inline-block;
background-color:red;
}
.image6{
width: 130px;
height:75px;
vertical-align: top;
display: inline-block;
background-color:red;
}
img{
max-height: 100%;
margin-left: auto;
margin-right: auto;
display: block;
}
和html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="index.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="image1"><img src="" class="test"/></div><p></p>
<div class="image2"><img src="" class="test"/></div>
<div class="image2"><img src="" class="test"/></div><p></p>
<div class="image3"><img src="" class="test"/></div>
<div class="image3"><img src="" class="test"/></div>
<div class="image3"><img src="" class="test"/></div><p></p>
<div class="image4"><img src="" class="test"/></div>
<div class="image4"><img src="" class="test"/></div>
<div class="image4"><img src="" class="test"/></div>
<div class="image4"><img src="" class="test"/></div><p></p>
<div class="image5"><img src="" class="test"/></div>
<div class="image5"><img src="" class="test"/></div>
<div class="image5"><img src="" class="test"/></div>
<div class="image5"><img src="" class="test"/></div>
<div class="image5"><img src="" class="test"/></div><p></p>
<div class="image5"><img src="" class="test"/></div>
<div class="image5"><img src="" class="test"/></div>
<div class="image5"><img src="" class="test"/></div>
<div class="image5"><img src="" class="test"/></div>
<div class="image5"><img src="" class="test"/></div><p></p>
<div class="image6"><img src="" class="test"/></div>
<div class="image6"><img src="" class="test"/></div>
<div class="image6"><img src="" class="test"/></div>
<div class="image6"><img src="" class="test"/></div>
<div class="image6"><img src="" class="test"/></div>
<div class="image6"><img src="" class="test"/></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="index.js"></script>
<!-- the body ends here -->
</body>
</html>