前端案例-左右移动

Admin_76

已于 2023-10-25 07:59:53 修改

阅读量365

点赞数 3

分类专栏：前端案例文章标签： 1024程序员节前端 javascript jquery html5 开发语言

于 2023-10-24 12:54:02 首次发布

本文链接：https://blog.csdn.net/Admin_76/article/details/134008726

版权

前端案例专栏收录该内容

5 篇文章 0 订阅

订阅专栏

思路分析

绑定事件：对应的按钮绑定点击事件
获取选中项：获取指定下拉框中被选中的选项
按钮类型：根据不同的按钮移动不同的选项

移动一项：获取下拉框中被选中选项的第一个
移动多项：获取下拉框被选中的选项
移动全部：获取下拉框的选项

实现步骤

获取对应的下拉框对象与下拉框中对应的选项
绑定指定按钮的点击事件
遍历下拉选项
判断是否被选中
将左侧被选中的下拉选项添加到数组中 (push())
将数组中的数组循环设置到右侧下拉框中

HTML代码

<table border="0" align="center">
		 	<tr>
				<td>
					<!-- 设置多选下拉框，并指定下拉框的可见项数量 -->
					<select id="left" multiple="multiple" size="10" style="width: 100px;">
						<option>A</option>
						<option>B</option>
						<option>C</option>
						<option>D</option>
						<option>E</option>
						<option>F</option>
						<option>G</option>
						<option>H</option>
						<option>I</option>
						<option>J</option>
						<option>K</option>
						<option>L</option>
						<option>M</option>
						<option>N</option>
					</select>
				</td>
				<td>
					<button id="toRight01">></button> <br>
					<button id="toRight02">>></button> <br>
					<button id="toRight03">>>></button> <br>
					<button id="toLeft01"><</button> <br>
					<button id="toLeft02"><<</button> <br>
					<button id="toLeft03"><<<</button>
				</td>
				<td>
					<select id="right" multiple="multiple" size="10" style="width: 100px;"></select>
				</td>
			</tr>
</table>

JS版本

<script type="text/javascript">
		// 获取对应的下拉框对象与下拉框的选项
		var leftSelect = document.getElementById("left");
		var leftItems = leftSelect.children;
		var rightSelect = document.getElementById("right");
		var rightItems = rightSelect.children;
		// 用来存放需要被移动的下拉选项
		var selectedItems = [];
		
		// 将左侧下拉框中选中的选项的第一个移动到右侧
		document.getElementById("toRight01").onclick = function () {
			// 遍历左侧所有的下拉选项
			for (var i = 0; i < leftItems.length; i++) {
				// 判断是否被选中
				if (leftItems[i].selected) {
					// 将循环得到的第一个被选中的选项移动到左右
					rightSelect.appendChild(leftItems[i]);
					return;
				}
			}
		}
		// 将左侧下拉框中选中的选项移动到右侧
		document.getElementById("toRight02").onclick = function () {
			// 清空数组中的数据
			selectedItems = [];
			// 遍历左侧所有的下拉选项
			for (var i = 0; i < leftItems.length; i++) {
				// 判断是否被选中
				if (leftItems[i].selected) {
					// 将选中的选项添加到数组中
					selectedItems.push(leftItems[i]);
				}
			}
			// 将数组中的数据循环追加到右侧
			for (var j = 0; j < selectedItems.length; j++) {
				rightSelect.appendChild(selectedItems[j]);
			}
		}
		
		// 将左侧下拉框中的选项移动到右侧
		document.getElementById("toRight03").onclick = function () {
			// 清空数组中的数据
			selectedItems = [];
			// 遍历左侧所有的下拉选项
			for (var i = 0; i < leftItems.length; i++) {
				// 将选中的选项添加到数组中
				selectedItems.push(leftItems[i]);
			}
			// 将数组中的数据循环追加到右侧
			for (var j = 0; j < selectedItems.length; j++) {
				rightSelect.appendChild(selectedItems[j]);
			}
		}
		
		
		
		// 将右侧下拉框中选中的选项的第一个移动到左侧
		document.getElementById("toLeft01").onclick = function () {
			// 遍历右侧所有的下拉选项
			for (var i = 0; i < rightItems.length; i++) {
				// 判断是否被选中
				if (rightItems[i].selected) {
					// 将循环得到的第一个被选中的选项移动到左右
					leftSelect.appendChild(rightItems[i]);
					return;
				}
			}
		}
		// 将右侧下拉框中选中的选项移动到左侧
		document.getElementById("toLeft02").onclick = function () {
			// 清空数组中的数据
			selectedItems = [];
			// 遍历右侧所有的下拉选项
			for (var i = 0; i < rightItems.length; i++) {
				// 判断是否被选中
				if (rightItems[i].selected) {
					// 将选中的选项添加到数组中
					selectedItems.push(rightItems[i]);
				}
			}
			// 将数组中的数据循环追加到左侧
			for (var j = 0; j < selectedItems.length; j++) {
				leftSelect.appendChild(selectedItems[j]);
			}
		}
		
		// 将右侧下拉框中的选项移动到左侧
		document.getElementById("toLeft03").onclick = function () {
			// 清空数组中的数据
			selectedItems = [];
			// 遍历左侧所有的下拉选项
			for (var i = 0; i < rightItems.length; i++) {
				// 将选中的选项添加到数组中
				selectedItems.push(rightItems[i]);
			}
			// 将数组中的数据循环追加到左侧
			for (var j = 0; j < selectedItems.length; j++) {
				leftSelect.appendChild(selectedItems[j]);
			}
		}
</script>

jQuery版本

<script type="text/javascript">
			// 将左侧选中的第一个选项移动到右侧
			$("#toRight01").click(function(){
				// 得到左侧下拉框对象。得到左侧下拉框的下拉选项，得到被选中的选项，得到第一个
				$("#left option:selected:eq(0)").appendTo($("#right"));
			});
			// 将左侧选中的选项移动到右侧
			$("#toRight02").click(function(){
				// 得到左侧下拉框对象。得到左侧下拉框的下拉选项，得到被选中的选项
				$("#left option:selected").appendTo($("#right"));
			});
			// 将左侧的选项移动到右侧
			$("#toRight03").click(function(){
				// 得到左侧下拉框对象。得到左侧下拉框的下拉选项
				$("#left option").appendTo($("#right"));
			});
			
			
			
			// 将右侧选中的第一个选项移动到左侧
			$("#toLeft01").click(function(){
				// 得到右侧下拉框对象。得到右侧下拉框的下拉选项，得到被选中的选项，得到第一个
				$("#right option:selected:eq(0)").appendTo($("#left"));
			});
			// 将右侧选中的选项移动到左侧
			$("#toLeft02").click(function(){
				// 得到右侧下拉框对象。得到右侧下拉框的下拉选项，得到被选中的选项
				$("#right option:selected").appendTo($("#left"));
			});
			// 将右侧的选项移动到左侧
			$("#toLeft03").click(function(){
				// 得到右侧下拉框对象。得到右侧下拉框的下拉选项
				$("#right option").appendTo($("#left"));
			});
</script>

注意事项

考虑到不同设备的屏幕尺寸和分辨率，要确保移动效果在不同设备上都能正常显示。
确保页面布局合理，左右移动的元素应该有足够的空间来进行移动，避免遮挡其他重要内容。

运用知识

使用JavaScript来控制移动效果的触发和交互，可以通过事件监听器来监听用户的操作，例如点击按钮或滑动手势等。

应用场景

轮播图：左右移动内容可以用于实现轮播图效果，通过将多张图片或者内容按照一定的顺序左右移动，可以实现图片或者内容的自动切换展示。

横向滑动菜单：左右移动内容可以用于实现横向滑动菜单，通过将菜单项按照一定的顺序左右移动，可以实现横向滑动切换菜单项的效果。

横向滑动列表：左右移动内容可以用于实现横向滑动列表，通过将列表项按照一定的顺序左右移动，可以实现横向滑动切换列表项的效果。

图片展示：左右移动内容可以用于实现图片展示的效果，通过将多张图片按照一定的顺序左右移动，可以实现图片的切换展示。

文字滚动：左右移动内容可以用于实现文字滚动效果，通过将文本内容按照一定的顺序左右移动，可以实现文字的滚动展示。

左右移动内容在前端开发中可以应用于多种场景，通过控制内容的左右移动可以实现各种动态展示效果。

案例优化

减少元素数量：如果可能的话，减少需要移动的元素数量，这样可以减少移动操作的复杂性和性能消耗。

使用CSS的transform属性来实现元素的平移效果，可以通过translateX()函数来控制元素在水平方向上的移动距离。

可以使用CSS的transition属性来控制移动效果的过渡动画，设置transition-duration来控制动画的持续时间。
可以使用CSS的@keyframes规则来创建自定义的动画序列，通过animation属性将动画应用到元素上，实现更复杂的移动效果。

使用CSS动画代替JavaScript动画：如果移动效果比较简单，可以考虑使用CSS动画来实现，因为CSS动画通常比JavaScript动画性能更好。

缓存DOM查询结果：如果需要频繁操作移动的元素，可以先缓存DOM查询结果，避免重复查询DOM节点，提高性能。