Question

我想要做的是设置类似于垂直旋转木马的功能，当分别在向下和向上方向上选择按键时，“项目” ID中的h1将居中。

我尝试了许多不同的方法，但除了错误外什么也没有遇到。

尝试更改类（由于这是更简单的概念，因此将附加一些代码）。
试图进行内联翻译。

两者均未成功。

HTML：

<div id="projects" class="content middle">
  <div id="project1" class="items">
    <h1>Project 1</h1>
  </div>
  <div id="project2" class="items">
    <h1>Project 1</h1>
  </div>
  <div id="project3" class="items">
    <h1>Project 1</h1>
  </div>
</div>

CSS（相关，如果需要，可以提供更多）：

.middle {
    transform: translate(0,0%);
}

.upper {
    transform: translate(0,50%);
}

.lower {
    transform: translate(0,-50%);
}

.items {
    position: relative;
    width: 70%;
    height: 50%;
    top: -25%;
    left: 50%;
    transform: translate(-50%,0%);
}

.items h1 {
    position: relative;
    top: 50%;
    transform: translate(0,-50%);
    font-size: 10rem;
    letter-spacing: 2.5px;
    color: transparent;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #95cfb4;
}

.active h1 {
    color: #95cfb4;
    -webkit-text-stroke-width: 0px;
    -webkit-text-stroke-color: #95cfb4;
}

.active h1:hover{
    font-size: 11rem;
}

JS：

// PROJECT SLIDER CONTENT EVENT //

var itemSlider = document.getElementById("projects");
var project1 = document.getElementById("project1");
var project2 = document.getElementById("project2");
var project3 = document.getElementById("project3");
var active = document.querySelector(".active");
var listItems = document.querySelectorAll(".items");
var currentItem = 1;

function translateUp(){
    if(itemSlider.classList == "lower"){
        itemSlider.classList.remove("lower");
        itemSlider.classList.add("middle");
    };
    if(itemSlider.classList == "middle"){
        itemSlider.classList.remove("middle");
        itemSlider.classList.add("upper");
    }
};

function translateDown(){
    if(itemSlider.classList == "upper"){
        itemSlider.classList.remove("upper");
        itemSlider.classList.add("middle");
    };
    if(itemSlider.classList == "middle"){
        itemSlider.classList.remove("middle");
        itemSlider.classList.add("lower");
    }
};

document.addEventListener("keydown", function checkKey(e){
    if(slideWrapper.classList == "projectsActive"){
        if(e.keyCode == "38"){
            translateUp();
        }
        if(e.keyCode == "40"){
            translateDown();
        }
    }
});

//**IDEALLY I WANT THE BELOW CODE TO WORK AS IT IS SET UP WITH THE ACTIVE 
//CLASS**//

listItems[currentItem].classList.add("active");

document.addEventListener("keydown", function(event){
    if(slideWrapper.classList == "projectsActive"){
        switch(event.keyCode){
            case 38:
                listItems[currentItem].classList.remove("active");
                currentItem = currentItem > 0 ? --currentItem : 0;
                listItems[currentItem].classList.add("active");
                break;
            case 40:
                listItems[currentItem].classList.remove("active");
                currentItem = currentItem < listItems.length-1 ? ++currentItem : listItems.length-1;
                listItems[currentItem].classList.add("active");
                break;
        }
    }
});

理想情况下，在按键上，我希望中间h1上方的h1向下推动中间h1并使其在页面上垂直居中（因此进行平移），而对于按键向下则相反。我希望它类似于水平旋转木马。

免责声明-我正在尝试改进Javascript，因此是原始代码。如果我的编码不符合标准，请原谅我，因为我仍在积极地自学！

使用纯JS尝试垂直传送带并遇到错误

0 个答案: