Question

我最近开始编码并被要求从头开始编码我们公司的网站。

我在网站上编写了一个团队页面，其中包含每个团队成员的PNG。当用户在任何一个PNG上盘旋时，他们会变成一个他们挥舞/做某事的动画GIF。

这是javascript：

$(document).ready(function()
{
    $("#imgAnimateBeth").hover(
        function(){
            this.src = "images/Team/Videos/Beth.gif";
        },
        function(){
            this.src = "images/Team/Static-shots/Beth.png";
        }
    );
});

我遇到的问题是我还想引入一个点击状态，该状态会弹出一个包含该人的视频及其工作描述的弹出窗口，但我无法使其工作。

我尝试过创建一个CSS叠加但是它拒绝与悬停效果（javascript）一起工作，所以我的假设是它们不能很好地一起玩（??）。

以下是上述部分的HTML。任何人都可以告诉我如何做到这一点？请简单的语言！

<div class="teamsection">
            <img src="images/Team/Static-shots/Beth.png" id="imgAnimateBeth">
            <img src="images/Team/Static-shots/Kiemia.png" id="imgAnimateKiemia">
            <img src="images/Team/Static-shots/Emma-B.png" id="imgAnimateEmmaB">
            <img src="images/Team/Static-shots/Mathew.png" id="imgAnimateMathew">
            <img src="images/Team/Static-shots/Sydney.png" id="imgAnimateSydney">
            <img src="images/Team/Static-shots/Liz.png" id="imgAnimateLiz">
            <img src="images/Team/Static-shots/Russ.png" id="imgAnimateRuss">
            <img src="images/Team/Static-shots/Jill.png" id="imgAnimateJill">
            <img src="images/Team/Static-shots/Merry.png" id="imgAnimateMerry">
            <img src="images/Team/Static-shots/Caroline.png" id="imgAnimateCaroline">
            <img src="images/Team/Static-shots/Charlotte.png" id="imgAnimateCharlotte">
            <img src="images/Team/Static-shots/Lucien.png" id="imgAnimateLucien">
            <img src="images/Team/Static-shots/Sarah.png" id="imgAnimateSarah">
            <img src="images/Team/Static-shots/Emma-S.png" id="imgAnimateEmmaS">
            <img src="images/Team/Static-shots/David.png" id="imgAnimateDavid">
            <img src="images/Team/Static-shots/Kathryn.png" id="imgAnimateKathryn">
          </div>

另外，如果您需要我上传任何其他内容，请大声喊。

CSS叠加层是这样的：

CSS代码叠加层是这样的：

.popup {
    display: none;
    position: fixed;
    padding: 30px 70px;
    width: 700px;
    height: 100%;
    z-index: 20;
    left: 50px;
    top: 20px;
    background: rgba(0, 0, 0, 0.9);
    overflow: scroll;
  }

一点点Javascript：

$ = function(id) {
  return document.getElementById(id);
}

var show = function(id) {
    $(id).style.display ='block';
}
var hide = function(id) {
    $(id).style.display ='none';
}

我基本上是这样做的HTML：

<div>
          <a href="javascript:void(0)" onclick="show('beth')">
            <img src="images/Team/Static-shots/Beth.png" id="imgAnimateBeth">
          </a>
        </div>

<div class="popup" id="beth">
        <div class="close-button">
          <a href="javascript:void(0)" onclick="hide('beth')"><i class="fa fa-times" aria-hidden="true"></i> Close</a>
        </div>
        <h4>CONTENT HERE</h4>
      </div>

Answer 1

也许这会给你一些想法：

var members = document.querySelectorAll('.team-member');

members.forEach(function(member) {
	member.addEventListener('mouseenter', memberShowGIF);
        member.addEventListener('mouseleave', memberShowPNG);
 	member.addEventListener('click', memberVideo);
});

function memberShowGIF(event) {
	this.src = this.dataset.gif;
}

function memberShowPNG(event) {
	this.src = this.dataset.png;
}

function memberVideo(event) {
	console.log('The video thing for: ' + this.id);
}

<div class="teamsection">
  <img id="Beth" class="team-member" 
       src="https://via.placeholder.com/200?text=Beth.png" 
       data-png="https://via.placeholder.com/200?text=Beth.png"
       data-gif="https://via.placeholder.com/200?text=Beth.gif">
  <img id="Kiemia" class="team-member" 
       src="https://via.placeholder.com/200?text=Kiemia.png" 
       data-png="https://via.placeholder.com/200?text=Kiemia.png"
       data-gif="https://via.placeholder.com/200?text=Kiemia.gif">
</div>

这里最重要的学习是：

querySelectorAll（作为选择节点的jQuery的替代品）
addEventListener
Data attributes

Javascript：结合悬停和点击事件

1 个答案: