JQuery+css3實(shí)現(xiàn)滑動(dòng)開(kāi)關(guān)效果

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

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

前言

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

思路

分為三部分：

結(jié)構(gòu)

樣式

效果

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

效果的話，最簡(jiǎn)單的自然就是JQuery中的animate動(dòng)畫(huà)了。

至于判斷開(kāi)關(guān)的狀態(tài)，大家可以在開(kāi)關(guān)按鈕中增加一個(gè)isopen的屬性，詳見(jiàn)后面代碼。

代碼

由于是從項(xiàng)目中扣下來(lái)的一部分，所有可能會(huì)有多余的東西，大家請(qǐng)酌情忽略。

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:

效果

實(shí)際項(xiàng)目中運(yùn)行的效果如下圖所示：

總結(jié)

好了，效果完成，至于功能的話，只要配合Ajax+PHP就可以達(dá)到開(kāi)關(guān)的目的了。

其他不多說(shuō)，大家自行體會(huì)吧。

云服務(wù)器 GPU云服務(wù)器 jquery實(shí)現(xiàn)滑動(dòng) 滑動(dòng)開(kāi)關(guān) Android滑動(dòng)開(kāi)關(guān) jquery與css3

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/115473.html

相關(guān)文章

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

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

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

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

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

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

劉玉平 2019-08-29 14:02 評(píng)論0 收藏0
前端常用插件、工具類(lèi)庫(kù)匯總（上）

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

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

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

XiNGRZ 2019-08-22 16:00 評(píng)論0 收藏0