水平滑动选择框实现示例

文使用html、css、javascript实现一个水平滑动选择框，实际效果见下图，水平方向的三个选项可以实现动态的滑动选择，当你理解了其中的实现方式后，你就可以实现自己的版本，滑动选项的多少可以自由定义，不是必须三个。

实现思路

整个的实现主要使用CSS，只需要一点点JavaScript代码，用来响应用户的鼠标点击事件。

首先，使用使用css flex布局实现一个水平排列选项列表，共包含三个选项，flex-container的justify-content设置为space-around使每个选项呈现在各自选项中居中的效果。另外设置flex-container宽度为24px，那么每个选项的宽度就是8px，还要设置flex-container的position为相对定位，这两个设置的作用在下面进行说明。

接下来，在flex-container内再添加一个flex-item，该flex-item的position属性设置为绝对定位，宽度为flex-container为33.33%，也就是8px，是一个选项的宽度，背景色为白色，将它叠加到某个选项上面实现选中的效果。为了实现选项切换的动画效果，使用了css的transform和transition属性，transform用来设置水平方向的移动距离，移动距离为8px的倍数，这样看起来就是在选项之间切换，transition用来设置过度的快慢。

这里需要特别说明的是，当把某个元素设置为绝对定位时，它并不是相对于整个body进行定位的，而是相对于最近的父级相对定位元素来定位，这也是把flex-container设置为相对定位的原因。

最后，写一点JavaScript代码来处理鼠标响应事件，用户使用鼠标点击某个选项时，就会为某个选项添加选中的class名，css特性就会触发相应的动画，实现选中的效果。

代码

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./slide.css">
    <title>slidemenu</title>
</head>
<body>
    <h1>水平滑动选择框示例</h1>
    <div class="row">
        <div class="menu left" id="slide-menu">
            <div class="menu-item menu-item-left">选项A</div>
            <div class="menu-item menu-item-center">选项B</div>
            <div class="menu-item menu-item-right">选项C</div>
            <div class="menu-item-toggle-handle"></div>
        </div>
    </div>
    <script src="./slide.js"></script>
</body>
</html>

css：

body {
    padding: 0;
    margin: 0;
}
.row {
    background-color: #f76820;
}
.row {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
}
.row .menu {
    display: flex;
    position: relative;
    height: 2.25rem;
    flex-wrap: nowrap;
    width: 24rem;
    justify-content: space-around;
    align-items: center;
    background: rgba(52,73,94,.4)!important;
    border: 3px solid rgba(52,73,94,.2);
    border-radius: .2rem;
}
.menu .menu-item {
    padding: 5px;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    cursor: pointer;
    z-index: 1;
}
.menu.left .menu-item-left, .menu.center .menu-item-center, .menu.right .menu-item-right {
    color: #f76820 !important;
}
.menu .menu-item-toggle-handle {
    width: 33.33%;
    height: 2.2rem;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 0;
    transform: translateX(0);
    transition: transform .3s;
}
.menu.center .menu-item-toggle-handle {
    transform: translateX(8rem);
}
.menu.right .menu-item-toggle-handle {
    transform: translateX(16rem);
}

JavaScript：

、良生- input type=file与文件上传

本文所说的input type=file指的是type类型是file的input元素，最简HTML代码如下：

但是，为了习惯，我们多写成：

在HTML5出现之前(XHTML)，我们的闭合规则则有些出入：

顾名思义，选择文件，并上传文件。

在万恶的旧时代，HTML5还没有出现之前，原生的file input表单元素只能让我们一次上传一张图片。无法满足一次上传多图的交互需求，所以，很多场景，就被swfupload.js给取代了，有点逐渐淡出人们视野的感觉。

然，技术发展，日新月异，三十年河东，三十年河西。随着原生HTML5表单对多图(multiple属性)、上传前预览，二进制上传等支持越来越广泛，原生的file input表单元素又迎来了新的升级，flash为背景的swfupload.js注定要落寞。

但是，对于PC项目，IE8-IE9浏览器还是不能忽略的。所以，现在，很流行的一种处理方式，就是HTML5 file上传和flash swfupload上传一起整合的模式，优先使用原生HTML5上传，不支持的，使用flash上传。我之前有篇关于HTML5上传的文章，每天访问量很高的：“基于HTML5的可预览多图片Ajax上传”，大家有兴趣可以看看。

如果想使用浏览器原生特性实现文件上传(如图片)效果，父级的form元素有个东西不能丢，就是：

enctype="multipart/form-data"

enctype属性规定在发送到服务器之前应该如何对表单数据进行编码，默认的编码是：”application/x-www-form-urlencoded“。对于普通数据是挺适用的，但是，对于文件，科科，就不能乱编码了，该什么就是什么，只能使用multipart/form-data作为enctype属性值。

无论是旧时代的单图上传，还是HTML5中的多图上传，均是如此。

文件，尤其图片，上场前能够预览，是很棒的交互体验。不走服务器，不耗费流量，多棒！

理想虽好，实现起来……

在HTML5还没出现的旧时代，只有低版本的IE浏览器貌似有方法，使用私有的滤镜，超越安全的限制（其实是利用了不好的东西），实现图片直接预览；但是呢，那个时候，Chrome, FireFox没有这一出，于是，想要使用原生file input实现图片的上传前预览，兼容性坎很难跨过去。

但是，后来，HTML5来了，我们出现了转机，IE10+以及其他现代浏览器，可以让我们直接读取图片的数据，然后在页面上呈现，实现了上传前预览；加上之前老IE的滤镜策略，貌似，可行。但是呢但是，老的IE浏览器只能最多一次选择一个文件，因此，只有单图上传的时候，大家可以考虑考虑。

传统的form提交，是要改变页面流的，也就是刷新后跳转。好的体验应该是走Ajax交互的。HTML5里面支持二进制formData数据提交，因此，可以从容Ajax提交上传的文件数据；那老旧的IE浏览器怎么办？

一般方法如下：

var doc = iframe.contentDocument ? iframe.contentDocument : frames[iframe.id].document; var response = doc.body && doc.body.innerHTML;

OK, 当然，你也可以不用像上面这么麻烦，直接使用jquery.form.js. 原理呢，就是上面这样，但是，不需要这么麻烦。

原生的file input不收待见的另外一个原因是：长的丑还不好控制。

举个例子，下图这个“选择文件”这几个文字，我们就不好对file控件动刀子实现自定义：

file input框

怎么办呢？

有一种方法是这样的：让file类型的元素透明度0，覆盖在我们好看的按钮上。然后我们去点击好看的按钮，实际上点击是是file元素。

然而，此方法有一些不足：

更好的方法是，使用label元素与file控件关联，好处在于：

效果如下（真实实时效果）：

input file类型控件有一个属性，名为

, 可能有些小伙伴不太了解。可以用来指定浏览器接受的文件类型，也就是的那个我们打开系统的选择文件弹框的时候，默认界面中呈现的文件类型。例如：

accept="image/jpeg"

，则界面中只有jpg图片，如下截图，同时，窗体右下方是“自定义文件”按钮：

自定义文件

实际开发的时候，很少只允许传jpg图片，应该都是只能传图片类型，此时，可以使用：

accept="image/*"

于是乎，“自定义文件”按钮变成了语义更明确的“图片文件”：

图片文件

accept属性值其实是MIME类型, 例如下面几个可能常用的：

accept="application/pdf" accept="audio/x-mpeg" accept="text/html" .accept="video/x-mpeg2"

然后，多个属性值使用逗号分隔，例如：

现代浏览器直接value = "", 有些IE浏览器貌似不行，好像使用file.outerHTML = file.outerHTML，我自己没测试。

不过我觉得比较麻烦，还要判断浏览器什么的。像本文的Ajax单图上传，直接form.reset()就可以了。

以上~

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。

单标签

常见的语句：

form：表单标签格式

作用：用来收集用户输入信息如：登入、注册、搜索商品等
action：开始网址
method：get和post等等
text （明文）：用户名格式
password ：（密文）密码
radio ：单选框性别格式性别是单选,单选类型是radio,注意name要加上sex
checkbox：复选框
textarea：文本框
file：上传文件
select：下拉选择框
button：按钮
reset：重置
submit：提交

详解：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>

<input type="radio" name="sex" id="" />男

<input type="radio" name="sex" id="" />女

</p>

<p>

<input type="checkbox" name="" id="" value="" />linux

<input type="checkbox" name="" id="" value="" />mysql

<input type="checkbox" name="" id="" value="" />html

<input type="checkbox" name="" id="" value="" />python

</p>

<p>学历

<option value="">请选择学历</option>

</select>

</p>

</p>

</form>

</body>

</html>

在线咨询

上一篇：CSS样式更改-字体设置Font&边框Border
下一篇：神一样的操作,真的牛逼了!Android Jetpack Compose 最全上手指南

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

水平滑动选择框实现示例

实现思路

代码

您的项目需求