js 控制页面内容 左移右移

最新推荐文章于 2022-05-27 19:09:24 发布
最新推荐文章于 2022-05-27 19:09:24 发布
阅读量870 收藏
点赞数
文章标签： js左移右移
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bosschen/article/details/84243002
版权 
<html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>
            调整上下左右顺序实例
        </title>
        <link rel="stylesheet" href="style/style_<%=strCssType%>.css" type="text/css">
        <script language="JavaScript">
            function chooseItems(source, target) {
                var choiceOptions = source.options;
                var selectedOptions = target.options;

                for (i = 0; i < (choiceOptions.length); i++) {
                    var temp = choiceOptions.item(i);
                    if (temp.selected == true) {
                        var oOption = document.createElement("OPTION");
                        selectedOptions[selectedOptions.length] = new Option(temp.text, temp.value);
                    }
                }

                for (j = (choiceOptions.length - 1); j >= 0; j--) {
                    var temp = choiceOptions.item(j);
                    if (temp.selected == true) {
                        choiceOptions[j] = null;
                    }
                }
            }

            function adjustUp() {
                var itemOptions = form1.selectcolumns.options;
                var selectedOption;
                var count = 0;
                var index;
                for (i = 0; i < itemOptions.length; i++) {
                    var temp = itemOptions.item(i);
                    if (temp.selected == true) {
                        count++;
                        if (count > 1) {
                            alert("只能选择一个列调整顺序！");
                            return;
                        } else if (count == 1) {
                            index = i;
                        }
                    }
                }
                if (count == 0) {
                    alert("请选择要调整顺序的列！");
                    return;
                }

                if (index == 0) return;

                selectedOption = itemOptions[index];
                var lastOption = itemOptions[index - 1];
                var temp = new Option(selectedOption.text, selectedOption.value);

                selectedOption.text = lastOption.text;
                selectedOption.value = lastOption.value;
                selectedOption.selected = false;

                lastOption.text = temp.text;
                lastOption.value = temp.value;
                lastOption.selected = true;
            }

            function adjustDown() {
                var itemOptions = form1.selectcolumns.options;
                var selectedOption;
                var count = 0;
                var index;
                for (i = 0; i < itemOptions.length; i++) {
                    var temp = itemOptions[i];
                    if (temp.selected == true) {
                        count++;
                        if (count > 1) {
                            alert("只能选择一个列调整顺序！");
                            return;
                        } else if (count == 1) {
                            index = i;
                        }
                    }
                }

                if (count == 0) {
                    alert("请选择要调整顺序的列！");
                    return;
                }

                if (index == itemOptions.length - 1) return;
                selectedOption = itemOptions[index];
                var nextOption = itemOptions[index + 1];
                var temp = new Option(selectedOption.text, selectedOption.value);

                selectedOption.text = nextOption.text;
                selectedOption.value = nextOption.value;
                selectedOption.selected = false;

                nextOption.text = temp.text;
                nextOption.value = temp.value;
                nextOption.selected = true;
            }

            function checkForm(form1) {
                var columnsOptions = form1.selectcolumns.options;

                if (columnsOptions.length == 0) {
                    alert("请选择要显示的列!");
                    return false;
                }

                for (i = 0; i < columnsOptions.length; i++) {
                    columnsOptions[i].selected = true;
                }

                return true;
            }
        </script>
    </head>
    
    <body>
        <form name="form1" method="post" action="basylistForward.do" onSubmit="return checkForm(form1)">
            <center>
                <table height="5" border="0" align="center" cellpadding="0" cellspacing="0">
                    <tr>
                        <td>
                        </td>
                    </tr>
                </table>
                <table width="700">
                    <tr>
                        <td width="40%" align="center">
                            <select name="choices" size="25" style="width: 100%" multiple="multiple">
                                <option value="userName">
                                    用户名
                                </option>
                                <option value="password">
                                    密码
                                </option>
                                <option value="Email">
                                    邮箱
                                </option>
                                <option value="address">
                                    住址
                                </option>
                                <option value="telephone">
                                    联系方式
                                </option>
                                <OPTION value="birthday">
                                    生日
                                </OPTION>
                                <OPTION value="firstName">
                                    名
                                </OPTION>
                                <OPTION value="lastName">
                                    姓
                                </OPTION>
                                <option value="age">
                                    年龄
                                </option>
                                <option value="company">
                                    工作单位
                                </option>
                                <option value="workTime">
                                    参加工作日期
                                </option>
                            </select>
                        </td>
                        <td width="10%" align="center">
                            <input name="but_r" type="button" class="buttonr" onClick="chooseItems(form1.choices, form1.selectcolumns)">
                            <table height="5" border="0" align="center" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td>
                                    </td>
                                </tr>
                            </table>
                            <input name="but_l" type="button" class="buttonl" onClick="chooseItems(form1.selectcolumns, form1.choices)">
                        </td>
                        <td width="40%" align="center">
                            <select name="selectcolumns" size="25" style="width: 100%" multiple="multiple">
                                <option value="BasySex_n">
                                    性别
                                </option>
                                <option value="BasyAge">
                                    年龄
                                </option>
                                <option value="BasyRdate">
                                    入院日期
                                </option>
                                <option value="BasyCDate">
                                    出院日期
                                </option>
                                <option value="BasyCykbN">
                                    出院科别
                                </option>
                                <option value="BasyCyMzd">
                                    主要诊断名称
                                </option>
                                <option value="BasyCyMcyqk_n">
                                    出院情况
                                </option>
                                <option value="BasyZyfySum">
                                    住院费用
                                </option>
                                <option value="BasyJzh">
                                    备用号
                                </option>
                            </select>
                        </td>
                        <td width="10%" align="center">
                            <input name="but_u" type="button" class="buttonu" onClick="adjustUp()">
                            <table height="5" border="0" align="center" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td>
                                    </td>
                                </tr>
                            </table>
                            <input name="but_d" type="button" class="buttond" onClick="adjustDown()">
                        </td>
                    </tr>
                    <tr>
                        <TD align="center">
                            &nbsp;
                        </TD>
                        <TD align="center">
                            &nbsp;
                        </TD>
                        <TD align="center">
                            <INPUT type="submit" class="button" value="显示(V)" 　accesskey="v">
                            &nbsp;&nbsp;
                            <a href="javascript:history.go(-1)">
                                <font color="red">
                                    返回
                                </font>
                            </a>
                        </TD>
                        <TD align="center">
                            &nbsp;
                        </TD>
                    </tr>
                </table>
            </center>
        </form>
    </body>

</html>
 

 

bosschen
关注
js实现点击往左移动
Revival_Liang的博客
06-22 7321
Document *{margin: 0px;padding: 0px;} ul{width: 10000px;height: 50px;left: 0px; position: relative; list-style: none;transition: width 0.5s;-moz-transition: left 0.5s;-webkit-transition: left 0.
网站开发积累（鼠标控制图片左右移动）
u012645961的专栏
11-18 1748
在最近的网站开发里，需要通过鼠标的位置来控制图片的左右平滑移动，说直接点就是：有一个比较长得图片，不能完全显示在窗口，当鼠标放在窗口右侧的时候，图片会向右移；当鼠标放在窗口左边的时候，图片会向左移；当鼠标放在窗口中间位置的时候，图片就不移动。根据一边查资料一边进行修改实验，终于给整出来了，现在将相关过程记录如下。 （一）首先，是找到一篇博客，题目是“js控制图片左右平滑移动”，里面列出了他控制图
js 实现 网页 屏幕可视区域内的碰撞移动
qq_45831414的博客
11-02 498
放在body内的html代码 <div id="photo" style="position: fixed; z-index: 11;"> <img src="img/图标/To_be_continued.png"> </div> 放在body内最后一行的html代码 <script type="text/javascript" src="js/crash.js"></script> 可以直接粘贴在.js文件中的js代码 var
JS元素的左右移动
Rick的博客
03-22 3645
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- 步骤分析 1. 确定事件: 点击事件 :onclick事件 2. 事件要触发函数 selectOne 3. selectO...
js特效-跟随鼠标的小红心
qq_41670147的博客
11-30 988
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
使用js实现超出的内容可以左右滚动
qq_45399146的博客
10-09 4230
因项目需求，需要超出的内容可以左右滚动，未限制实现方法
JS实现左边的下拉框内容移动到右边下拉框，支持内容上下移动
03-22
标题中的“JS实现左边的下拉框内容移动到右边下拉框，支持内容上下移动”是一个常见的前端交互功能，常用于表单或者过滤选择场景。这个功能涉及到JavaScript的基础知识，DOM操作，事件处理以及可能的AJAX技术。下面...
JS动态可控制左右滚动的图片代码
04-13
【标题】"JS动态可控制左右滚动的图片代码"涉及的知识点主要集中在JavaScript语言和网页动态效果的实现上。JavaScript是一种广泛应用于客户端Web开发的脚本语言，它主要用于增加网页的交互性和动态功能。在这个场景...
JavaScript利用键盘码控制div移动
11-21
在JavaScript编程中，控制网页元素动态行为是一种常见的需求，特别是在创建交互式网页应用时。本文将详细介绍如何利用键盘码来实现HTML中的div元素移动，以此为基础，你可以构建类似贪吃蛇游戏的基础框架。 首先，...
头歌教学实践平台 Web前端开发基础 JavaScript学习手册三：JS运算符
最新发布
01-20
虽然JavaScript主要用于高级编程，但仍有位运算符，如按位与`&`、按位或`|`、按位异或`^`、左移`、右移`>>`和无符号右移`>>>`，这些在处理二进制数据时很有用。 三、自增自减运算符 `++` 和 `--` 是自增和自减...
用js实现右移
05-20
js实现所有信息显示在左边的文本框，通过鼠标选择后，点击右移，就能将选择的移动到右边的文本框去了
js实现动画，右移、左移，上移，下移，左上角移动等
渐行渐远
06-30 3万+
js实现动画，右移、左移，上移，下移，左上角移动等
js左移右移规律
wlm_0214的博客
03-08 2094
js左移右移规律
使用css属性，使div上下左右移动
热门推荐
qq_26780317的博客
05-28 16万+
    在html中，有时需要使某个div上下左右移动，使div元素位置产生偏移。本文使用了css3的transform:translate(X,Y)，和css的相对定位来实现div元素的偏移。一、使用css3 transform:translate(X,Y)来偏移元素    transform属性应用于元素的2D或3D转换，这个属性允许你将元素旋转，缩放，移动，倾斜等。值描述none定义不进行转...
用jquery编写左移与右移网页，设置CSS完成左移右移的结构和样式设置。通过层级选择器和表单选择器获取选中的操作项。通过`append()`方法将匹配到的内容追加到指定元素的尾部。
m0_53911328的博客
05-27 474
CSS页面代码： <style > *{ margin: 0; padding: 0; } .box{ display: flex; margin:20px 100px; } .tiltle{ margin: 10px 0; } select{ width: 100px; height: 150px;
支持table的td左右移动（支持绝大多数浏览器），建议配合tableoverflow一起用
tz_gx的专栏
03-05 3750
1：table 添加id=“listViewTable” 2：js function changeTdWidth(){     var tTD; // 用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题     var table = document.getElementById("listViewTable");     for (j = 0; j      
html table 右移,使用table表格无端的整体向右偏移一段距离
weixin_32262089的博客
06-16 2664
google控制台下移动到元素下出现对的box的html：事件标题备注事件时间闹钟时间闹钟还剩状态操作css：.home-message{height:285px;width:100%;margin:0 auto;border-width:1px;border-style: solid;border-color:#dbdee1;font-size: 11px;}.ev-show-title{col...
51单片机汇编语言实现按键控制流水灯左移右移
05-29
下面是在 51 单片机上使用汇编语言实现按键控制流水灯左移右移的代码： ``` ; 定义端口、变量等 ORG 0H MOV P1, #0H ; 设置 P1 端口初始值为 0 MOV P2, #0H ; 设置 P2 端口初始值为 0 MOV A, #0H ; 定义 A 寄存器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值