js Dom and jquery实现窗体内容左右移动

最新推荐文章于 2023-10-24 12:54:02 发布
最新推荐文章于 2023-10-24 12:54:02 发布
阅读量296 收藏 2
点赞数
分类专栏： JS 文章标签： 左右移动 DOM左右移动 jQuery左右移动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42277719/article/details/103240335
版权

js Dom and jquery实现窗体内容左右移动

在这里插入图片描述

第一种js写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左右移动</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        body {
            width: 300px;
            margin:0 auto;
            background-color: bisque;
        }

        #main {
            border: solid skyblue 2px;
            margin-top: 100px;
            width: 300px;
            height: 200px;
        }

        #div1 {
            width: 118px;
            height: 200px;
            float: left;


        }

        #div2 {
            margin-left: 2px;
            width: 60px;
            height: 200px;

            float: left;
            background: sandybrown;
        }

        #div3 {
            margin-left: 2px;
            width: 118px;
            height: 200px;
            float: left;

        }

        select {

            height: 200px;
            width: 118px;
        }
    </style>
</head>
<body>
<div id="main">
    <div id="div1">
        <select id="left" size="10" multiple>
            <option value="a">语文</option>
            <option value="b">数学</option>
            <option value="c">英语</option>
            <option value="d">物理</option>
            <option value="e">化学</option>
            <option value="f">生物</option>
        </select>
    </div>
    <div id="div2">
        <input type="button" value="右移" style="top: 20px" onclick="moveRight()"/><br>
        <input type="button" value="左移" style="top: 70px" onclick="moveLeft()"/><br>
        <input type="button" value="全部右移" style="top: 120px" onclick="moveRightAll()"/><br>
        <input type="button" value="全部左移" style="top: 170px" onclick="moveLeftAll()"/><br>
    </div>

    <div id="div3">
        <select id="right" size="10" multiple="multiple">

        </select>
    </div>
</div>
<script type="text/javascript">
	var flag=new Boolean();
//    右移
    function moveRight() {
    moveFromTo('left','right',true)
    
    }
//    zuo移
    function moveLeft() {
	moveFromTo('right','left',true)
    }
//    全部右移
    function moveRightAll() {
      moveFromTo('left','right')
    }
//    全部左移
    function moveLeftAll() {
       moveFromTo('right','left')
    }
    function moveFromTo(fro,to,flag){
    	var left=document.getElementById(to);
    	var right=document.getElementById(fro);
    	
    	var strs=new Array();
    	strs=right.getElementsByTagName('option');
    	var len=strs.length;
    	for (var i=len-1;i>=0;i--) {
    		if(flag){
    			if (strs[i].selected==true) {
    				left.appendChild(strs[i])
    			}
    		}else{
    			left.appendChild(strs[i]);
    		}
    	}
    	
    }
</script>
</body>
</html>

第二种jquery写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左右移动</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        body {
            width: 300px;
            margin:0 auto;
            background-color: bisque;
        }

        #main {
            border: solid skyblue 2px;
            margin-top: 100px;
            width: 300px;
            height: 200px;
        }

        #div1 {
            width: 118px;
            height: 200px;
            float: left;


        }

        #div2 {
            margin-left: 2px;
            width: 60px;
            height: 200px;

            float: left;
            background: sandybrown;
        }

        #div3 {
            margin-left: 2px;
            width: 118px;
            height: 200px;
            float: left;

        }

        select {

            height: 200px;
            width: 118px;
        }
    </style>
</head>
<body>
<div id="main">
    <div id="div1">
        <select id="left" size="10" multiple>
            <option value="a">语文</option>
            <option value="b">数学</option>
            <option value="c">英语</option>
            <option value="d">物理</option>
            <option value="e">化学</option>
            <option value="f">生物</option>
        </select>
    </div>
    <div id="div2">
        <input type="button" value="右移" style="top: 20px" onclick="moveRight()"/><br>
        <input type="button" value="左移" style="top: 70px" onclick="moveLeft()"/><br>
        <input type="button" value="全部右移" style="top: 120px" onclick="moveRightAll()"/><br>
        <input type="button" value="全部左移" style="top: 170px" onclick="moveLeftAll()"/><br>
    </div>

    <div id="div3">
        <select id="right" size="10" multiple="multiple">

        </select>
    </div>
</div>
<script type="text/javascript">
//    右移
    function moveRight() {
   $('#div1 option:selected').appendTo('#right');
    }
//    zuo移
    function moveLeft() {
	   $('#div3 option:selected').appendTo('#left');
	      
	  
    }
//    全部右移
    function moveRightAll() {
     $('#div1 option').appendTo('#right');
    }
//    全部左移
    function moveLeftAll() {
 $('#div3 option').appendTo('#left');
    }
</script>
</body>
</html>

这里面没啥重点的东西，就是注意append方法是将元素移动
而不能用add方法
一开始我是用的add
发现移动的只能是value，移动后删除还要写一个方法
然后反过来移动就删除不了了；
没办法老师让使用两种方法，就有了上面的两种截然不同的做法

小红帽与灰太狼
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生js操作dom实现上下左右移动.docx
11-23
原生js操作dom实现上下左右移动.docx
Js键盘事件实现元素上下左右动态移动（内含源码）
最新发布
lplovewjm的博客
11-18 1517
本文主要讲解如何利用JavaScript控制键盘的上下左右键同时利用监听键盘事件来实现对一个元素的控制。键盘控制，本质上是监听到用户对键盘使用，并在监听后实现一些方法使得元素可以跟随键盘进行移动。
【js---鼠标点击可拖动左右内容的实现】
小蓝人的博客
05-21 943
只需要改变对IT变量的限制即可。
JS控制点击按钮图片向左或向右循环移动滚动效果
wlimin0523的专栏
12-02 8270
JS控制点击按钮图片向左或向右移动效果 演示 TABLE { BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BO
JS dom节点实现移上、移下的效果（表格）
@宝藏男孩
03-23 1319
如何用DOM节点去实现表格内容移上 移下的效果，我们这里需要了解两个知识点！ previousSibling 属性返回选定节点的上一个同级节点（在相同树层级中的前一个节点） 返回节点以节点对象返回 语法：document.getElementById("tr").previousSibling 注意：如果不存在这样的节点，则该属性返回 null Exp: previoussibling获取的兄...
鼠标拖拽移动子窗体的JS实现
12-11
本文将详细讲解如何使用JavaScript（JS）来实现这一功能。 首先，我们来看一下HTML和CSS的基础结构。模态子窗体通常由一个背景层（modal-background）和一个内容窗体（modal-window）组成。在提供的代码示例中，`....
jquery实现窗体淡入淡出效果
07-30
本教程将详细讲解如何利用jQuery实现窗体的淡入淡出效果，以及如何使div层随鼠标移动，适用于创建动态且吸引人的商品信息展示。 首先，你需要在HTML文件中引入jQuery库。这通常通过CDN链接或者本地文件来完成。例如...
使用jquery实现以post打开新窗口
12-11
在网页开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理、动画制作以及Ajax交互。本文主要讨论如何使用jQuery实现以POST方式打开新窗口，这在某些场景下是必要的，例如用户提交表单后需要在...
jquery 弹出模态窗体
08-28
在网页设计和开发中，jQuery 是一个非常流行的 JavaScript 库，它简化了DOM操作、事件处理、动画效果以及Ajax交互。"jquery 弹出模态窗体"是jQuery中的一个功能，用于创建交互式用户体验，使得用户在不离开当前页面...
通过JQuery，JQueryUI和Jsplumb实现拖拽模块
10-16
**JQuery** 是一个广泛使用的JavaScript库，简化了DOM操作、事件处理、动画以及Ajax交互。它的核心理念是“Write Less, Do More”，即用更少的代码实现更多的功能。 **JQueryUI** 是基于JQuery的扩展库，提供了丰富...
JS五张连篇，点击左右按钮可以移动！（图片左右滚动特效）
03-19
JS五张连篇，点击左右按钮可以移动！（图片左右滚动特效）主要用于想实现图片左右能滚动，点击左右按钮图片可以移动！！不错的！
js简单实现点击左右运动的方法
10-24
主要介绍了js简单实现点击左右运动的方法,实例分析了javascript实现左右运动的相关要点与技巧,非常具有实用价值,需要的朋友可以参考下
JS实现列表数据左右、上下移动功能
简约人生的博客
04-13 9645
本文主要介绍JS实现将左边下拉框列表选中项数据添加到右边的功能，支持多选移动。文章中提供了两种方案，一种是将左侧选中项复制到右边，左侧数据不发生变化，同时阻止数据重复添加到右侧；另一种是数据添加到右边的同时从左边移除，从右边移除的同时向左边追加，并对右侧列表数据实现了上下移动功能。 一、效果图 进行左右移动时，选定一项或多项点击添加或移除(按住shift或ctrl可以多选)，上下移动不支持多选...
JS按钮控制内容左右滚动
波克比的前端CSDN博客
12-05 1032
CSS部分： *{ padding: 0; margin: 0;} li{ list-style: none;} .clearfix{ *zoom:1;} .clearfix:after{ clear: both; display: block; content: ""; height: 0; overflow: hidden;} a{ text-decoration: none; co
JavaScript中用Jquery实现左右点击滚动效果
lengjing126的专栏
05-20 2218
JavaScript中用Jquery实现左右点击滚动效果  无标题文档.clear {    clear: both;}#list {    width: 1000%;    position: absolute;    left: 0px;    top: 0px;}#list .item {    width: 190px;    height: 300px;    float:
javascript--键值或按钮控制div移动、轮播
张新丁
06-14 742
1、在屏幕添加四个按钮，上下左右，来控制一个div的移动   &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;点击按钮操作上下移动&lt;/title&gt; &lt;/head&gt
js实现鼠标可实现左滚动右滚动效果
qq_64353584的博客
02-19 2829
需要掌握以下要点知识的基础人员： 掌握html基本元素基础知识 掌握css布局基础知识 js运动基础知识 本实例很简单，重在考研大家的功底 样式css *{ padding: 0; margin: 0; } li{ list-style: none; } img{ border:0; } /* 控制 */ .control{ border-bottom: 1px solid #ccc; background-color: #eee; text-align: center;
前端案例-左右移动
Admin_76的博客
10-24 356
控制内容的左右移动实现各种动态展示效果
js实现横排多个dom自动左右移动
05-26
可以通过使用 `setInterval()` 函数和 `transform` 属性来实现横排多个 DOM 自动左右移动的效果。具体步骤如下： 1. 使用 CSS 将多个 DOM 元素横排，并设置好宽度和高度等样式。 2. 使用 JavaScript 获取这些 DOM ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值