本文实例为大家分享了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的文字,显示‘是',‘否',修改滑块相对位置
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
本文向大家介绍利用jQuery实现滑动开关按钮效果(附demo源码下载),包括了利用jQuery实现滑动开关按钮效果(附demo源码下载)的使用技巧和注意事项,需要的朋友参考一下 首先来看看要实现的效果图: HTML结构如下: 初始化函数: 完整demo: HTML: JS: 实例下载:点击此处 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家
本文向大家介绍jQuery实现的经典滑动门效果,包括了jQuery实现的经典滑动门效果的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现的经典滑动门效果。分享给大家供大家参考。具体如下: 这是一款jQuery 滑动门,从样式上来说,虽然有些古板,但已经具备了经典的滑动门功能,感兴趣的朋友可以继续美化一下界面。 运行效果截图如下: 在线演示地址如下: http://demo.j
本文向大家介绍jquery实现左右滑动菜单效果代码,包括了jquery实现左右滑动菜单效果代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jquery实现左右滑动菜单效果代码。分享给大家供大家参考。具体如下: 这里演示了三种背景颜色左右滑动jquery菜单导航效果,IE下有问题,本菜单使用了CSS3的部分属性,因此建议使用火狐或Chrome等浏览器获取最佳效果。当把鼠标移到菜单上的时候
本文向大家介绍JavaScript实现滑动门效果,包括了JavaScript实现滑动门效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了JavaScript实现滑动门效果的具体代码,供大家参考,具体内容如下 一、什么是滑动门 首先你要了解什么是滑动门。 生活中我们经常看到一些网站或是商城有一些滑动门的效果 那么怎么实现一个简单的滑动门的网页特效呢?下面简单分享一下方法, 二、实现滑
本文向大家介绍Android开发仿IOS滑动开关实现代码,包括了Android开发仿IOS滑动开关实现代码的使用技巧和注意事项,需要的朋友参考一下 Android开发仿IOS滑动开关实现代码 Android与iOS相比,ios好多控件都是自带的,而android需要使用自定义来实现。今天说的是ios的滑动开关,我层看到好多博客都是通过自定义ToggleButton实现的。这里我通过自定义view来
本文向大家介绍jQuery实现带滑动条的菜单效果代码,包括了jQuery实现带滑动条的菜单效果代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现带滑动条的菜单效果代码。分享给大家供大家参考。具体如下: 这是一款带滑动条的jQuery滑动菜单,菜单下边有一个蓝色的线条,鼠标移上哪里它就跟向哪里,可以指引当前菜单的位置,另外,动画效果是基于jquery的animate(),对
本文向大家介绍jQuery实现移动端滑块拖动选择数字效果,包括了jQuery实现移动端滑块拖动选择数字效果的使用技巧和注意事项,需要的朋友参考一下 本文为大家分享了基于jquery ui实现的一个精美实用的效果,可以通过鼠标拖拽滑动效果来选择数字,供大家参考,具体内容如下 运行效果图: 实现代码: 以上就是jQuery实现移动端滑块拖动选择数字效果的代码,希望对大家的学习有所帮助。
本文向大家介绍jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果,包括了jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果。分享给大家供大家参考,具体如下: 这里演示jQuery实现鼠标移动到链接上,滑动展开/隐藏图片效果,鼠标放在“上一页”“下一页”上,立即浮现出所对应的图