本文实例为大家分享了jQuery实现滑动开关效果的具体代码,供大家参考,具体内容如下
Demo效果如下,点击绿色椭圆小块,实现可滑动和动画效果,不是图片切换。
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的文字,显示‘是',‘否',修改滑块相对位置
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
风云阁资源网 Design By www.bgabc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
风云阁资源网 Design By www.bgabc.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 《第9层》游戏特色玩法介绍
- 刀郎.2006-刀郎【九雨天下】【WAV+CUE】
- 59.9高校生.1994-素兰万岁【上华】【WAV+CUE】
- ECHO.1991-你是爱我还是需要我(国专)【EMI百代】【WAV+CUE】
- 交错战线零课主线困难通关阵容推荐一览
- 交错战线挖掘矿场角色推荐攻略
- 命运圣契公测平民阵容怎么搭配 新手开荒平民阵容攻略
- 金梅《现代发烧的声音2》发烧碟[WAV+CUE]
- 雨果唱片-《历史录音珍藏系列-现代芭蕾舞剧·红色娘子军》2CD【WAV】
- [雨果唱片]李冰《地方民歌·戏曲系列-爱的颂歌》WAV
- 《模拟人生》真人电影官宣!玛格特·罗比担任制片人
- 《星战绝地》系列玩家数超4000万!续作表现超预期
- EA称AI是其业务核心!能提高开发效率、节约成本
- 《十年经典成名好歌 高品质最佳音乐 2CD》[WAV/分轨][1GB]
- 《8个男人的故事 2CD》[WAV/分轨][1GB]