我试图实现这个结果Output但我坚持这个结果我在下面给出,我想在图像上添加文本,但我无法访问对象的属性,我使用after()
method但没有工作任何帮助不胜感激。
$(document).ready(function() {
let aku = {
ObjectUrl: 'https://s3.amazonaws.com/mohanrfrontendtest/square1.png',
ResourceName: 'level-1',
resources: {
ObjectUrl: 'https://s3.amazonaws.com/mohanrfrontendtest/square2.png',
ResourceName: 'level-2',
resources: {
ObjectUrl: 'https://s3.amazonaws.com/mohanrfrontendtest/square3.png',
ResourceName: 'level-3'
}
}
}
let abhi = [aku.ObjectUrl,
aku.resources.ObjectUrl,
aku.resources.resources.ObjectUrl
]
$("#img-id").attr("src", abhi[0]);
$("#img-id-1").attr("src", abhi[1]);
$("#img-id-2").attr("src", abhi[2]);
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#img-id {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#img-id-1 {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 25em;
height: 25em;
z-index: -1;
}
#img-id-2 {
position: fixed;
width: 13em;
height: 10em;
top: 46%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="aku"><img src="level1" id="img-id"></div>
<div class="aku-1"><img src="level2" id="img-id-1"></div>
<div class="aku-2"><img src="level3" id="img-id-2"></div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="jq2.js"></script>
</body>
</html>
如果有任何其他方法来解决这个问题,我很高兴听到它..
检查此代码
$(document).ready(function () {
let aku = {
ObjectUrl: 'https://s3.amazonaws.com/mohanrfrontendtest/square1.png',
ResourceName: 'level-1',
resources:
{
ObjectUrl: 'https://s3.amazonaws.com/mohanrfrontendtest/square2.png',
ResourceName: 'level-2',
resources:
{
ObjectUrl: 'https://s3.amazonaws.com/mohanrfrontendtest/square3.png',
ResourceName: 'level-3'
}
}
}
let abhi = [aku.ObjectUrl,
aku.resources.ObjectUrl,
aku.resources.resources.ObjectUrl
];
//<span class="caption"> Text below the image</span>
$("#img-id").attr("src", abhi[0]);
$("#img-id-1").attr("src", abhi[1]);
$("#img-id-2").attr("src", abhi[2]);
function getResourceName(obj, url) {
for (var k in obj) {
if (obj[k] == url) {
return obj.ResourceName;
}
else if (k == "resources")
return getResourceName(obj[k], url);
}
}
$("img").on('load', function () {
var resourceName = getResourceName(aku, $(this).attr("src"));
$(this).after('<span class="caption" style="top: ' + ($(this).position().top + $(this).height()) + 'px"> ' + resourceName+'</span>');
});
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#img-id {
position: fixed;
top: 50%;
left: 50%;
width: 12em;
height: 7em;
transform: translate(-50%, -50%);
}
#img-id-1:after {
content: " - Remember this";
background-color: yellow;
color: red;
font-weight: bold;
}
#img-id-1 {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 15em;
height: 11em;
z-index: -1;
}
#img-id-2 {
position: fixed;
width: 7em;
height: 4em;
top: 46%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
.caption {
position: fixed;
left: 48%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="aku"><img src="level1" id="img-id"></div>
<div class="aku-1"><img src="level2" id="img-id-1"></div>
<div class="aku-2"><img src="level3" id="img-id-2"></div>