5
Hi Tôi có một biểu ngữ tùy chỉnh được thực hiện với đoạn mã sauKiểm tra xem biểu ngữ được nạp
body,
html {
width: 100%;
height: 100%;
margin: 0;
font-family: Arial, serif;
color: #003C78;
}
a {
color: #003C78;
}
.banner-wrap {
display: flex;
width: 728px;
height: 90px;
}
.page-container {
position: relative;
overflow: hidden;
width: 100%;
}
.page-container img {
width: 100%
}
.image-wrapper,
.text-wrapper {
position: absolute;
height: auto;
width: 411px;
}
.image-wrapper {
top: 0;
right: -155px;
z-index: 2;
animation: slideLeft 14.5s infinite ease 0s normal forwards;
}
.image-wrapper img {
position: absolute;
left: 0px;
top: -100px;
width: 150%
}
.text-wrapper h1,
.text-wrapper h2 {
position: absolute;
left: 90px;
padding: 0;
opacity: 0;
z-index: 3;
font-size: 1.3em;
}
.text-wrapper h1 {
animation: fade infinite 14.5s linear 0s normal forwards;
animation-delay: 4s;
top: 15px;
}
.text-wrapper h2 {
animation: fadeNew infinite 14.5s linear 0s normal forwards;
animation-delay: 7.8s;
}
.text-wrapper img {
position: absolute;
left: 50px;
bottom: 30px;
width: 468px;
height: 180px
}
.red-wrapper {
position: absolute;
bottom: 0px;
z-index: 9;
right: -600px;
color: #fff;
animation: slideLeftNew 14.5s infinite ease 0s normal forwards;
animation-delay: 7s;
padding-left: 15px;
border-bottom: 100px solid #E6000A;
border-right: 50px solid transparent;
height: 0;
width: 120px;
}
.red-wrapper h3 {
font-size: 1.1em;
font-weight: 300;
margin-top: 26px;
}
.logo img {
width: 80px;
height: auto;
margin: 17px;
}
img.kitchen {
transform: translateY(-40%);
-webkit-transform: translateY(-40%);
-ms-transform: translateY(-40%);
width: 63%;
position: absolute;
left: -18px;
animation: moveUp 14.5s infinite ease 0s normal forwards;
}
img.wall {
width: 11%;
position: absolute;
left: 0;
z-index: 9;
}
@keyframes slideLeft {
20.95% {
right: -155px
}
85%,
27.19% {
right: 135px;
}
}
@keyframes slideLeftNew {
15.95% {
right: -220px
}
20.19%,
37% {
right: 0
}
42% {
right: -220px;
}
}
@keyframes fade {
0% {
opacity: 0
}
23%,
14.38% {
opacity: 1
}
26% {
opacity: 0
}
}
@keyframes fadeNew {
0% {
opacity: 0
}
30%,
14.38% {
opacity: 1
}
33% {
opacity: 0
}
}
@keyframes moveUp {
0% {
transform: translateY(-40%);
}
50% {
transform: translateY(-45%);
}
}<!DOCTYPE html>
<html>
<head>
<title>Hawa Sliding Solutions</title>
<meta content="text/html;charset=UTF-8" http-equiv="content-type">
</head>
<body>
<a href="http://hawa-suono.com/" target="_blank">
<div class="banner-wrap">
<div class="logo"><img src="logo.png"></div>
<div class="page-container">
<div class="text-wrapper">
<h1>Den Alltag auf stumm schalten.</h1>
<h2>Hawa Suono – die schalldichte Lösung.</h2>
</div>
<img class="wall" src="wall.png" />
<img class="kitchen" src="kitchen3.jpg" />
<div class="image-wrapper"><img src="tuer2.jpg" /></div>
<div class="red-wrapper">
<h3>Jetzt die Weltneuheit entdecken.</h3>
</div>
</div>
</div>
</a>
</body>
</html>Bây giờ tôi cần phải kiểm tra xem các biểu ngữ được nạp và làm việc, và nếu nó không phải là, sau đó tôi cần phải đặt một hình ảnh khác thay vì biểu ngữ. Tôi đã thử rất nhiều thứ, để kiểm tra xem hình ảnh có ở đó không, để kiểm tra xem css đã được nạp chưa, kiểm tra xem tài liệu có được tải không, nhưng giải pháp đó không thể hoạt động được, vì tôi chỉ phải kiểm tra xem biểu ngữ có được tải không, không phải toàn bộ tài liệu . Vì vậy, bây giờ, tôi xếp chồng lên nhau và không biết phải làm gì tiếp theo. Ngoài ra, tôi không thể sử dụng jquery, chỉ javascript tinh khiết. Bất kỳ trợ giúp nào? Cảm ơn
Những hình ảnh bảng hiệu? Đó có phải là 'logo.png' không? – Chris
Mọi thứ đều là biểu ngữ. Cả ba hình ảnh đều tạo một biểu ngữ hoạt hình. –