JQuery+css3实现滑动开关效果

Yangyang 发布于2019-08-30 13:19 / 2621人阅读

摘要：前言为了前端的美观和用户体验的友好，有时我们会将某些选项的开关做成点击滑动显示的效果，特别是手机上。那么这里我将为大家讲解下如何使用实现该效果。效果的话，最简单的自然就是中的动画了。

前言

为了前端的美观和用户体验的友好，有时我们会将某些选项的开关做成点击滑动显示的效果，特别是手机上。那么这里我将为大家讲解下如何使用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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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