首頁猿問我需要在我的網(wǎng)頁中為電梯圖像設(shè)置動...

我需要在我的網(wǎng)頁中為電梯圖像設(shè)置動畫并將其移動到視圖中的預(yù)設(shè)位置

JavaScript

不負(fù)相思意 2022-05-14 14:34:37

好的，所以我正在制作電梯模擬器。一切的業(yè)務(wù)邏輯都很好，我正在使用隊列。我遇到的問題是將電梯從隊列中的一層移動到下一層。我正在使用 HTML、CSS 和 JavaScript/Jquery。到目前為止，我一直在嘗試的兩種方法是 Jquery 的動畫方法和 CSS 翻譯。我還沒有找到一個像樣的答案。我最近的嘗試與在 DOM 中使用不可見元素有關(guān)，以便獲得將電梯移動到的坐標(biāo)。我將提供代碼片段以進(jìn)行進(jìn)一步解釋。那是網(wǎng)頁的圖片，如您所見，我需要能夠在任何給定時間將電梯移動到任何給定樓層。// Called when user selects the Start button$('#btn-start').click(function() { // Start the Simulation let destination = $('#second-floor').offset(); $("#elevator").animate( {right: destination.left, bottom: destination.top}, 4000, "linear", function(){console.log("Elevator finished moving")} ); //});});.elevator-visual { width: 55%;}.elevator { position: relative; max-width: 10vw; margin-left: 6vw;}.floor { position: relative;}.hidden-destination { position: absolute; bottom: 10vw; left: 11vw; background: none; height: 5px; width: 5px;}.floor-bound { width: 75%; margin-bottom: 15vw;}#first-floor,#second-floor { margin-bottom: 0;}.floor-title { margin: 0; padding: 0; text-align: right; color: #777; margin-right: 6vw;}#floor-four-lable { margin-top: 15vw;}.btn-start{ position: static; border: none; padding: 8px 21px; vertical-align: middle; text-align: center; cursor: pointer; border-radius: 5%; font-size: 24px; background-color: #b77110; color: white; margin-left: 15px; margin-top: 10px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="elevator-visual"> <div class="floor"> <div class="hidden-destination"></div> <p id="floor-four-lable" class="floor-title">Floor 4</p> <hr id="forth-floor" class="floor-bound" /> </div> <div class="floor"> <div class="hidden-destination"></div> <p class="floor-title">Floor 3</p> <hr id="third-floor" class="floor-bound" /> </div> <div class="floor"> <div class="hidden-destination"></div> <p class="floor-title">Floor 2</p> <hr id="second-floor" class="floor-bound" /> </div></div>

查看完整描述

2 回答

侃侃無極

TA貢獻(xiàn)2051條經(jīng)驗獲得超10個贊

像這樣的東西？

只需將底部動畫到您想要它去的任何地方。

我在這里使用固定的 px 值作為高度，以便更容易理解正在發(fā)生的事情（至少我希望它更容易）

我從要為其設(shè)置動畫的元素中獲取偏移量（只是最大值）。然后我將電梯的最高值設(shè)置為與目的地的最高值相匹配。

// Called when user selects the Start button

$('#btn-start').click(function() {

// Start the Simulation

let destination = $('#second-floor').offset().top;

$("#elevator").animate( {top: destination}, 200, "linear" );

//});

});

$('.btn-to-floor').on('click', function() {

let floor = $(this).data('floor');

let floors = $('.floor').length;

// eq(floors - floor) needed to so some magic calculations (you could also just use some hardcoded id here based on data attribute.

let destination = $('.floor').eq(floors - floor ).find('.floor-bound').eq(0).offset().top;

$("#elevator").animate( {top: destination}, 200, "linear");

});

.elevator-visual {

width: 55%;

position: relative;

}

.elevator {

position: absolute;

margin-left: 6vw;

bottom: 0;

}

.floor {

height: 180px; /* height of elevator + text + line */

}

.floor-bound {

width: 75%;

}

.floor-title {

margin: 0;

padding: 0;

text-align: right;

color: #777;

margin-right: 6vw;

}

.btn-start{

position: static;

border: none;

padding: 8px 21px;

vertical-align: middle;

text-align: center;

cursor: pointer;

border-radius: 5%;

font-size: 24px;

background-color: #b77110;

color: white;

margin-left: 15px;

margin-top: 10px;

}

<p id="floor-four-lable" class="floor-title">Floor 4</p>

</div>

<p class="floor-title">Floor 3</p>

</div>

<p class="floor-title">Floor 2</p>

</div>

<p class="floor-title">Floor 1</p>

</div>

</div>

<button id="btn-start" class="btn-start">Start</button>

反對回復(fù) 2022-05-14

阿晨1998

TA貢獻(xiàn)2037條經(jīng)驗獲得超6個贊

使用 css 的過渡和次要 javascript，您可以通過按鈕的 onclick 的內(nèi)聯(lián) javascript 調(diào)用將您的對象（無論是 img 還是其他，我在演示中使用基于文本的 span）動畫到頁面的一部分 - 我在這篇文章的底部為你寫了一個快速而骯臟的演示。

有關(guān) css 過渡的更多信息：https ://www.w3schools.com/css/css3_transitions.asp

注意：我沒有包含您的隊列列表機(jī)制，因為這不是您的問題的一部分......但是將我的示例實施到您的項目中應(yīng)該不會太難 - 祝你好運(yùn)。

.lift {

position: absolute;

transform: rotate(90deg);

bottom: 10%;

left: 30%;

transition-duration: 2s;

}

.flrfour {

position: absolute;

bottom: 85%;

left: 5%;

}

.flrthree {

position: absolute;

bottom: 60%;

left: 5%;

}

.flrtwo {

position: absolute;

bottom: 35%;

left: 5%;

}

.flrone {

position: absolute;

bottom: 10%;

left: 5%;

}

.buttons {

position: absolute;

bottom: 5px;

left: 50%;

}

<span class="flrfour"> floor 4 </span>

<span class="flrthree"> floor 3 </span>

<span class="flrtwo"> floor 2 </span>

<span class="flrone"> floor 1 </span>

<div class="buttons"><button onclick="document.getElementById('lft').style.bottom = '10%';">1</button><button onclick="document.getElementById('lft').style.bottom = '35%';">2</button><button onclick="document.getElementById('lft').style.bottom = '60%';">3</button><button

onclick="document.getElementById('lft').style.bottom = '85%';">4</button>

</div>

反對回復(fù) 2022-05-14