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解析获取JSON数据
Apr 08 jQuery
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
jquery实现直播视频弹幕效果
Feb 25 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
用php实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
利用PHP扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
可以文本显示的公告栏的js代码
2007/03/11 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
js渐变显示渐变消失示例代码
2013/08/01 Javascript
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
Angular+Bootstrap+Spring Boot实现分页功能实例代码
2017/07/21 Javascript
Vue.js弹出模态框组件开发的示例代码
2017/07/26 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
angular6的响应式表单的实现
2018/10/10 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
[01:00:25]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS Liquid
2018/03/31 DOTA
python网络爬虫学习笔记(1)
2018/04/09 Python
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
python3实现飞机大战
2020/11/29 Python
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
英国街头品牌:Bee Inspired Clothing
2018/02/12 全球购物
几道数据库的概念性面试题
2014/05/30 面试题
医德医风演讲稿
2014/05/20 职场文书
优秀纪检干部材料
2014/08/27 职场文书
纪律教育学习心得体会
2014/09/02 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python