水平滑動選擇框實現示例

文使用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類型控件有一個屬性，名為

, 可能有些小伙伴不太了解?？梢杂脕碇付g覽器接受的文件類型，也就是的那個我們打開系統的選擇文件彈框的時候，默認界面中呈現的文件類型。例如：

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小時內與您取得聯系。

整合營銷服務商

水平滑動選擇框實現示例

實現思路

代碼

您的項目需求