基本上,假設我有一個用 HTML/CSS 創建的框。
<style type='text/css'>
#box {
width: 48px;
height: 48px;
background-color: black;
position: absolute;
left: 280px;
top: 180px;
}
</style>
風格并不重要。
如何讓該框從頁面左側開始并按下開始按鈕將其帶到頁面中間而無需使用 JavaScript 按下停止按鈕?
我知道如何使用箭頭鍵、連續移動或開始然后停止按鈕來移動它,但不知道如何改變位置。
uj5u.com熱心網友回復:
考慮以下。
$(function() {
$("button").click(function() {
$("#box").animate({
left: $(window).width() - $("#box").width()
});
});
});
#box {
width: 48px;
height: 48px;
background-color: black;
position: absolute;
left: 280px;
top: 180px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box"></div>
<button>Go</button>
您也可以使用沒有影片的樣式來執行此操作。
#box.moved {
left: calc(100% - 48px);
}
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/451551.html
標籤:javascript html jQuery css
上一篇:帶有Joi的條件陣列項
