JQuery+css3實現(xiàn)滑動開關效果

Yangyang 發(fā)布于2019-08-30 13:19 / 2636人閱讀

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

前言

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

思路

分為三部分：

結(jié)構

樣式

效果

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

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

至于判斷開關的狀態(tài)，大家可以在開關按鈕中增加一個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:

效果

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

總結(jié)

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

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

云服務器 GPU云服務器 jquery實現(xiàn)滑動滑動開關 Android滑動開關 jquery與css3

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115473.html

原生js系列之無限循環(huán)輪播組件

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

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

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

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

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

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

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

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

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

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