JQuery+css3實現滑動開關效果

Yangyang 發布于2019-08-30 13:19 / 2622人閱讀

摘要：前言為了前端的美觀和用戶體驗的友好，有時我們會將某些選項的開關做成點擊滑動顯示的效果，特別是手機上。那么這里我將為大家講解下如何使用實現該效果。效果的話，最簡單的自然就是中的動畫了。

前言

為了前端的美觀和用戶體驗的友好，有時我們會將某些選項的開關做成點擊滑動顯示的效果，特別是手機上。那么這里我將為大家講解下如何使用JQuery+CSS3實現該效果。

思路

分為三部分：

結構

樣式

效果

結構和樣式的話，不用廢話，直接html+css就能完成，如果有不知道如何下手的，請參照我后面給出的代碼。

效果的話，最簡單的自然就是JQuery中的animate動畫了。

至于判斷開關的狀態，大家可以在開關按鈕中增加一個isopen的屬性，詳見后面代碼。

代碼

由于是從項目中扣下來的一部分，所有可能會有多余的東西，大家請酌情忽略。

html:

CSS:

.remind ul li .right {
    width:66px;
    height:36px;
    padding:3px;
    border-radius: 30px;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    background-color: #838383;
    position: relative;
}

.remind ul li .right .btnn {
    width:30px;
    height:30px;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    border-radius:30px;
    background-color: #fff;
    position: absolute;
}

JS:

效果

實際項目中運行的效果如下圖所示：

總結

好了，效果完成，至于功能的話，只要配合Ajax+PHP就可以達到開關的目的了。

其他不多說，大家自行體會吧。

GPU云服務器云服務器 jquery實現滑動滑動開關 Android滑動開關 jquery與css3

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115473.html

原生js系列之無限循環輪播組件

摘要：沒有看過上一篇文章的話，可以在這里找到原生系列之工廠模式。那么這篇文章，我們將基于上述的，從頭開始寫一個無限循環輪播圖的組件。附無限循環輪播圖示例本文源碼前情回顧在上一篇文章中，我們封裝了一個DOM庫（qnode），為了讓大家直觀地感受到其方便友好的自定義工廠模式，于是給大家帶來了這篇文章。沒有看過上一篇文章的話，可以在這里找到：原生js系列之DOM工廠模式。那么這篇文章，我們...

ad6623 2019-08-01 18:13 評論0 收藏0
原生js系列之無限循環輪播組件

摘要：沒有看過上一篇文章的話，可以在這里找到原生系列之工廠模式。那么這篇文章，我們將基于上述的，從頭開始寫一個無限循環輪播圖的組件。附無限循環輪播圖示例本文源碼前情回顧在上一篇文章中，我們封裝了一個DOM庫（qnode），為了讓大家直觀地感受到其方便友好的自定義工廠模式，于是給大家帶來了這篇文章。沒有看過上一篇文章的話，可以在這里找到：原生js系列之DOM工廠模式。那么這篇文章，我們...

jimhs 2019-08-22 11:18 評論0 收藏0
原生js系列之無限循環輪播組件

摘要：沒有看過上一篇文章的話，可以在這里找到原生系列之工廠模式。那么這篇文章，我們將基于上述的，從頭開始寫一個無限循環輪播圖的組件。附無限循環輪播圖示例本文源碼前情回顧在上一篇文章中，我們封裝了一個DOM庫（qnode），為了讓大家直觀地感受到其方便友好的自定義工廠模式，于是給大家帶來了這篇文章。沒有看過上一篇文章的話，可以在這里找到：原生js系列之DOM工廠模式。那么這篇文章，我們...

劉玉平 2019-08-29 14:02 評論0 收藏0
前端常用插件、工具類庫匯總（上）

摘要：函數庫動畫庫動畫庫，也是目前最通用的動畫庫。下拉框級聯選擇器移動端最好用的的篩選器組件聯動篩選移動端最好用的的篩選器組件聯動篩選顏色選擇器時間選擇器時間日期處理是一個解析，驗證，操作和顯示日期和時間的類庫。 showImg(https://segmentfault.com/img/bVbjpHt?w=900&h=383); 前言在開發中，我們經常會將一些常用的代碼塊、功能塊進行封裝，...

txgcwm 2019-08-23 13:06 評論0 收藏0
67 個拯救前端開發者的工具、庫和資源

摘要：庫一個用來在中創建炫酷的浮動粒子的庫一個用來在中創建物體和空間的庫快速實現全屏滾動特性打字機效果滾動到某個元素位置時觸發一個功能語法高亮使用創建漂亮的圖表能夠明顯加速網站加載時間，鼠標時預加載資源另一個圖表庫一個基于動畫和平移的雪碧圖庫實現 Javascript 庫 Particles.js? 一個用來在 web 中創建炫酷的浮動粒子的庫 Three.js? 一個用來在 web 中創...

XiNGRZ 2019-08-22 16:00 評論0 收藏0