jQuery实现滑动开关效果


Posted in jQuery onAugust 02, 2020

本文实例为大家分享了jQuery实现滑动开关效果的具体代码,供大家参考,具体内容如下

Demo效果如下,点击绿色椭圆小块,实现可滑动和动画效果,不是图片切换。

jQuery实现滑动开关效果

HTML结构代码:

<div class="ck-switch">
 <span class="ck-switch-on">是</span>
 <span class="ck-switch-off ck-switch-current ck-switch-current-40"></span>
</div>

CSS代码:

/** 外部div式样 */
ck-switch{
 width: 75px;
 height: 26px;
 margin: 0px auto;
 position: relative;
 -moz-border-radius: 50px;
 -webkit-border-radius: 50px;
 border-radius: 50px;
 -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
 -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
 box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}
/** 是.的效果#66b9b3绿色 */
.ck-switch-on{
 color: #66b9b3;
 position: absolute;
 left: 10px;
 z-index: 0;
 font-weight: bold;
}
/** 否.的效果#cccccc灰色 */
.ck-switch-off{
 color: #CCCCCC;
 position: absolute;
 right: 10px;
 z-index: 0;
 font-weight: bold;
 text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15);
}
/** 绿色椭圆小块 */
.ck-switch-current{
 display: block;
 width: 30px;
 height: 20px;
 cursor: pointer;
 position: absolute;
 top: 3px;
 z-index: 1;
 background: #66b9b3;
 -moz-border-radius: 50px;
 -webkit-border-radius: 50px;
 border-radius: 50px;
}
/** left定位 */
.ck-switch-current-3{
 left: 3px;
}
.ck-switch-current-40{
 left: 42px;
}

JQuery代码:

function initCkSwitch(){
 
 $('.ck-switch .ck-switch-off').unbind('click').bind('click',function(){
 $('.ck-switch .ck-switch-on').addClass('ck-switch-current ck-switch-current-3').html('');
 $('.ck-switch .ck-switch-off').removeClass('ck-switch-current ck-switch-current-40').html('否');
 });
 
 
 $('.ck-switch .ck-switch-on').unbind('click').bind('click',function(){
 if($(this).hasClass('ck-switch-on')){
 $('.ck-switch .ck-switch-on').removeClass('ck-switch-current ck-switch-current-3').html('是');
 $('.ck-switch .ck-switch-off').addClass('ck-switch-current ck-switch-current-40').html('');
 }
 });
};

点击滑块,动态的修改html的文字,显示‘是',‘否',修改滑块相对位置

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
jQuery 动态粒子效果示例代码
Jul 07 jQuery
jQuery实现开关灯效果
Aug 02 #jQuery
jquery轮播图插件使用方法详解
Jul 31 #jQuery
jQuery带控制按钮轮播图插件
Jul 31 #jQuery
jquery实现简单自动轮播图效果
Jul 29 #jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 #jQuery
jquery实现简单拖拽效果
Jul 20 #jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 #jQuery
You might like
常用星际术语索引(新手指南)
2020/03/04 星际争霸
PHP与SQL注入攻击[二]
2007/04/17 PHP
PHP CURL获取cookies模拟登录的方法
2013/11/04 PHP
ThinkPHP中使用ajax接收json数据的方法
2014/12/18 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
Apache无法自动跳转却显示目录的解决方法
2020/11/30 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
2006/11/30 Javascript
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
简单实现js菜单栏切换效果
2017/03/04 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
jquery实现下载图片功能
2019/07/18 jQuery
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
Python简单生成随机姓名的方法示例
2017/12/27 Python
python使用Turtle库绘制动态钟表
2018/11/19 Python
Python中os模块功能与用法详解
2020/02/26 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
Django nginx配置实现过程详解
2020/09/10 Python
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
俄罗斯GamePark游戏商店网站:购买游戏、游戏机和配件
2020/03/13 全球购物
法学毕业生自我鉴定
2014/01/31 职场文书
暑期社会实践方案
2014/02/05 职场文书
学习演讲稿范文
2014/05/10 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫