javascript - 图像左侧消失
问题描述
点击播放图像后,左侧消失,不可见。
如何让播放图像的左侧保持可见而不消失?
我不明白为什么会这样。
这个问题是如何解决的?
这就是我遇到的问题的一切。
代码https://jsfiddle.net/kqr691fs/
(function iife() {
"use strict";
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
hide(cover);
const curtain = document.querySelector(".curtain");
curtain.classList.add("slide");
const thewrap = curtain.parentElement.querySelector(".container");
show(thewrap);
}
const cover = document.querySelector(".jacketa");
cover.addEventListener("click", coverClickHandler);
}());
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #353198;
}
.curtain {
position: relative;
width: 100%;
height: 100%;
}
.curtain.slide {
height: auto;
min-height: 100%;
overflow: hidden;
}
.panel-left,
.panel-right {
position: absolute;
height: 100%;
width: 50%;
top: 0%;
transition: all ease 10s;
/*background-image: url("https://picsum.photos/600");
background-size: cover;
background-repeat: no-repeat;
background-position: center;*/
overflow: hidden;
}
.panel-left {
left: 0;
/*background-color: rgb(91, 96, 106);*/
}
.panel-right {
right: 0;
/*background-color: rgb(229, 211, 211);*/
}
.panel-left::before,
.panel-right::before {
content: "";
position: absolute;
height: 100%;
width: 200%;
top: 0;
left: 0;
background-image: url("https://picsum.photos/1920/1080");
background-size: auto;
background-repeat: no-repeat;
background-position: 0 0;
}
.panel-right::before {
left: -100%;
}
.curtain.slide .panel-left {
transform: translateX(-100%);
}
.curtain.slide .panel-right {
transform: translateX(100%);
}
.outer {
display: table;
height: 100%;
margin: 0 auto;
}
.tcell {
display: table-cell;
vertical-align: middle;
}
.jacketa {
position: absolute;
top: 40px;
width: 180px;
height: 180px;
cursor: pointer;
border-radius: 50%;
background: #130e85;
border: 3px solid #f91f6e;
box-sizing: border-box;
box-shadow: 0 0 20px 2px #f9066bf7;
}
.j1 .jacketa {
left: 30px;
}
.j2 .jacketa {
right: 30px;
}
.jacketa .coversvg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
cursor: pointer;
}
.jacketa .coversvg {
width: 70px;
height: 75.4px;
fill: none;
stroke-width: 4px;
stroke-miterlimit: 10;
}
.jacketa .coversvg .back {
stroke: #000;
opacity: 0.15;
}
.jacketa .coversvg .front {
stroke: #08f9ff;
stroke-dasharray: 150;
stroke-dashoffset: 1500;
animation: draw 20s infinite linear, flicker-1 2s linear 2s infinite both;
}
@keyframes draw {
100% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
@keyframes flicker-1 {
0%,
100% {
opacity: 1;
}
41.99% {
opacity: 1;
}
42% {
opacity: 0;
}
43% {
opacity: 0;
}
43.01% {
opacity: 1;
}
47.99% {
opacity: 1;
}
48% {
opacity: 0;
}
49% {
opacity: 0;
}
49.01% {
opacity: 1;
}
}
.split-wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 240px;
height: 260px;
margin: auto;
border-radius: 50%;
transition: 10s ease;
}
.j1 {
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
overflow: hidden;
transition: 10s ease;
}
.j2 {
position: absolute;
left: 50%;
top: 0;
width: 50%;
height: 100%;
overflow: hidden;
transition: 10s ease;
}
.container {
height: auto;
}
.curtain.slide .j1 {
left: -500%;
}
.curtain.slide .j2 {
left: 500%;
}
.hide {
display: none;
}
<div class="curtain">
<div class="outer">
<div class="tcell">
<div class="container hide">
<div class="container-top">
</div>
</div>
<div class="panel-left"> </div>
<div class="panel-right"> </div>
<div class="split-wrap">
<div class="j1">
<div class="jacketa" title="[ Enjoy The Music ]">
<svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
<title>[ Enjoy The Music ]</title>
<path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
<path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
</svg>
</div>
</div>
<div class="j2">
<div class="jacketa" title="[ Enjoy The Music ]">
<svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
<title>[ Enjoy The Music ]</title>
<path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
<path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
解决方案
“点击”事件仅适用于左侧图像。因为,这里querySelector()
用到了。它将返回一个 Element 对象,表示文档中与指定的 CSS 选择器集匹配的第一个元素,如果没有匹配项,则返回 null。
相反,您可以querySelectorAll()
像这样使用
使用 ES6:
const cover = document.querySelectorAll('.jacketa');
cover.forEach(el => el.addEventListener('click', coverClickHandler));
使用 For 循环:
const cover = document.querySelectorAll('.jacketa');
for (var i = 0; i < cover.length; i++) {
cover[i].addEventListener('click', coverClickHandler);
}
现在图像的两边都会触发事件。
推荐阅读
- javascript - 在 1 行代码中以 Javascript 显示实时日期 + 时间
- sql - SQL - 隐藏重复值 - sql 脚本
- c# - 如何使用实体框架错误获取记录列表 - 模型项传递到字典中,但此字典需要模型项
- laravel - 从控制器向 vue.js 发送错误并删除方括号
- python - 在 python 中实现 curl --resolve 标志
- excel - 在多个选择中复制多个范围
- jquery - 检测 jQuery 滚动的每个像素
- sql-server - 在 MSSQL 和 Entity Framework Core 中仅向表中添加新行的最有效方法
- php - Android - 如何将文件名添加到调用 PHP 文件的上传文件函数
- c++ - VSCode - 有红色下划线,但程序构建和运行正确,并且调试错误