通過按鈕操作元素左移和右移
阿新 • • 發佈：2019-02-11
在寫列表的過程中遇到一個問題類似下面的圖片，當元素排滿時隱藏，並且可以通過左右按鈕使裡面的元素左右移出。
由於前端知識匱乏，遇到了一些問題
1、方法一
外部的div的寬度是固定不變的，裡面的元素的個數不是固定的，當內部所有元素的個數的寬度超出外部div的時候，元素會向下排列，而且並不隱藏，下圖是內部li未超出父級寬度的情況
當元素超出時就會向下排列
解決辦法
給父級元素新增如下程式碼white-space: nowrap;
並且讓內部li為display: inline-block;
此時就不會向下排列，並且出現橫向滾動條可以左右滑動
示例程式碼
<!DOCTYPE html> 但是此時，橫向滾動條並不好看，因此需要尋找更加好的方法。
1、方法二
建立兩個 div 內部一個外部一個，內部使用絕對定位外部使用相對定位，然後建立兩個按鈕，當點選按鈕的時候，去改變內部的div的left和right屬性值。
這樣的話就避免了橫向滾動條的出現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#ul-content {
position: absolute;
white-space: nowrap;
}
#ul-content li {
margin: 10px;
width: 80px;
height: 30px;
background: red;
display: inline-block;
border-radius: 10px;
}
#div-view {
position: relative;
margin: 200px auto;
height: 50px;
width: 500px;
line-height: 30px;
text-align: center;
background-color: olivedrab;
overflow: hidden;
}
button {
position: absolute;
}
.left {
left: 0;
}
.right {
right: 0;
}
</style>
</head>
<body>
<div id="div-view">
<ul id="ul-content">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<button class="left" type="button">左移動</button>
<button class="right" type="button">右移動</button>
</div>
</body>
</html>
然後通過js去操作left屬性就可以了
<script>
var left = document.querySelector('.left');
var right = document.querySelector('.right');
var ul = document.getElementById('ul-content');
var left_position = ul.offsetLeft;
var tid;
left.onmousedown = function () {
tid = setInterval(function () {
left_position -= 1;
ul.style.left = left_position + 'px';
}, 1)
};
left.onmouseup = function () {
clearInterval(tid);
};
right.onmousedown = function () {
tid = setInterval(function () {
left_position += 1;
ul.style.left = left_position + 'px';
}, 1)
};
right.onmouseup = function () {
clearInterval(tid);
};
</script>