用css3或者jquery实现切换按钮效果
2015-05-02 12:42
411 查看
switch demo地址:http://codepen.io/tianzi77/pen/VLLBmQ
整理思路:
这个 DEMO 的功能大致就是模拟开关效果,用于增强原生的 checkbox。视觉效果大致是一个白色的方块左右移动,这里我们最直接的可以想到这种实现:
这么来看,我们需要控制的元素有3个,并且我们仔细观察后能发现边框的颜色也会发生变化,那这种控制可能成本太高了,我们想想能不能减少需要控制的元素:
这么一想,似乎需要控制内容从 3 个变成了 2 个。那么激活按钮这块又如何实现呢?还是最直接的方式:
刚才的经验告诉我们,也许最直接能想到的并不是最好的,由于我们知道 CSS 父级元素可以让超出其范围的子级元素隐藏,于是我们又想到这种思路:
似乎到此为止,我们已经得到一个比较清晰并且简单的实现思路,那么接下来开始具体实现。
通过 javascript
先讲最常见的,通过 JS 监听事件来控制样式修改。
构建 DOM 结构
按照我们上面的思路,DOM 结构大致可以如下构建:
写 CSS 样式
基于以上的 DOM 结构,我们来处理 CSS 样式,可以分为已激活和未激活两种状态来处理。
未激活:
已激活:
写 JS 控制
完成了 CSS 样式后进入 JS 的控制部分。从样式中我们可以看出,两种状态的差别只有很小的部分,于是我们可以通过 JS 来实现这种样式的修改:
优化
之前的课上讲过最好不要直接通过 JS 来修改样式属性,而是通过控制 class 来完成对于样式的修改。那么对于上面的代码,我们可以简化成如下的形式:
CSS:
JS:
通过 css
优化后的代码 JS 部分已经非常简单,那么有没有方法可以不用 JS 来实现这个需求呢?并且,我们这里本来是准备增强 checkbox 的,结果却没有出现 checkbox,那么如果是在 form 中,岂不是会对数据的提交产生影响?
OK,那面对这些问题,我们尝试着从另一种思路来处理这件事情,即通过纯 CSS 的方式来处理。
构建 DOM 结构
写 CSS
由于 CSS 中没有监听事件之类的处理,那么我们这里如何来实现这个需求呢?
静心细想,发现其实我们只是在两个状态间切换罢了,所以远不用事件那么麻烦,无非是两个状态的记录。而我们正好要增强的就是 checkbox,于是结合相邻兄弟选择器,有了如下代码:
CSS3 transition
我们已经实现了基本需求,接下来还差最后一步的动画效果。CSS3 中有一个属性叫做 transition,我们利用它便可以非常方便的实现需求。
整理思路:
这个 DEMO 的功能大致就是模拟开关效果,用于增强原生的 checkbox。视觉效果大致是一个白色的方块左右移动,这里我们最直接的可以想到这种实现:
左边一个蓝色方块,中间一个白色方块,右边一个灰色方块,三者宽度调整宽度和位置来完成动画
这么来看,我们需要控制的元素有3个,并且我们仔细观察后能发现边框的颜色也会发生变化,那这种控制可能成本太高了,我们想想能不能减少需要控制的元素:
把灰色部分作为背景,边框属于这个背景,激活按钮在背景上滑动
这么一想,似乎需要控制内容从 3 个变成了 2 个。那么激活按钮这块又如何实现呢?还是最直接的方式:
修改蓝色部分的宽度和白色部分的位置
刚才的经验告诉我们,也许最直接能想到的并不是最好的,由于我们知道 CSS 父级元素可以让超出其范围的子级元素隐藏,于是我们又想到这种思路:
把蓝色和白色作为一个整体,让它在背景上滑动,未激活的状态时左侧超出的部分被隐藏掉,激活状态时正常显示
似乎到此为止,我们已经得到一个比较清晰并且简单的实现思路,那么接下来开始具体实现。
通过 javascript
先讲最常见的,通过 JS 监听事件来控制样式修改。
构建 DOM 结构
按照我们上面的思路,DOM 结构大致可以如下构建:
<div class="switch"> <div class="switch-btn"></div> </div>
写 CSS 样式
基于以上的 DOM 结构,我们来处理 CSS 样式,可以分为已激活和未激活两种状态来处理。
未激活:
.switch { display:inline-block; overflow:hidden; position:relative; border:solid 1px #ccc; background-color:#ccc; height:25px; width:60px; } .switch-btn { position:absolute; top:0; left:-35px; height:25px; width:25px; background-color:#fff; border-left:solid 35px #69f; }
已激活:
.switch { display:inline-block; overflow:hidden; position:relative; border:solid 1px #69f; background-color:#ccc; height:25px; width:60px; } .switch-btn { position:absolute; top:0; left:0; height:25px; width:25px; background-color:#fff; border-left:solid 35px #69f; }
写 JS 控制
完成了 CSS 样式后进入 JS 的控制部分。从样式中我们可以看出,两种状态的差别只有很小的部分,于是我们可以通过 JS 来实现这种样式的修改:
var flag = false, $switch = $('.switch'), $switchBtn = $switch.children('.switch-btn'); $switch.bind('click', function () { if (flag) { $switch.css('border-color', '#ccc'); $switchBtn.css('left', '-35px'); } else { $switch.css('border-color', '#69f'); $switchBtn.css('left', 0); } flag = !flag; });
优化
之前的课上讲过最好不要直接通过 JS 来修改样式属性,而是通过控制 class 来完成对于样式的修改。那么对于上面的代码,我们可以简化成如下的形式:
CSS:
.switch { display:inline-block; overflow:hidden; position:relative; border:solid 1px #ccc; background-color:#ccc; height:25px; width:60px; } .switch-btn { position:absolute; top:0; left:-35px; height:25px; width:25px; background-color:#fff; border-left:solid 35px #69f; }
.active.switch {
border-color:#69f;
}
.active > .switch-btn {
left:0;
}
JS:
$('.switch').bind('click', function () { $(this).toggleClass('active'); });
通过 css
优化后的代码 JS 部分已经非常简单,那么有没有方法可以不用 JS 来实现这个需求呢?并且,我们这里本来是准备增强 checkbox 的,结果却没有出现 checkbox,那么如果是在 form 中,岂不是会对数据的提交产生影响?
OK,那面对这些问题,我们尝试着从另一种思路来处理这件事情,即通过纯 CSS 的方式来处理。
构建 DOM 结构
<input id="switch-btn" type="checkbox" name="switch"> <label for="switch-btn" class="switch"> <div class="switch-btn"></div> </label>
写 CSS
由于 CSS 中没有监听事件之类的处理,那么我们这里如何来实现这个需求呢?
静心细想,发现其实我们只是在两个状态间切换罢了,所以远不用事件那么麻烦,无非是两个状态的记录。而我们正好要增强的就是 checkbox,于是结合相邻兄弟选择器,有了如下代码:
input { height:0; width:0; margin:0; } input:checked ~ label { border-color:#69f; } input:checked ~ label .switch-btn{ left:0; } .switch { display:inline-block; overflow:hidden; position:relative; border:solid 1px #ccc; background-color:#ccc; height:25px; width:60px; } .switch-btn { transition:all 0.4s; top:0; left:-35px; height:25px; width:25px; background-color:#fff; border-left:solid 35px #69f; }
CSS3 transition
我们已经实现了基本需求,接下来还差最后一步的动画效果。CSS3 中有一个属性叫做 transition,我们利用它便可以非常方便的实现需求。
相关文章推荐
- 基于jquery实现左右按钮点击的图片切换效果
- jQuerydiv点击添加或者移除样式实现导航切换效果
- jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
- 使用jQuery和CSS3实现的“加载中”效果按钮 极客标签 - 做最棒的极客知识分享平台
- 用jQuery和css3实现的一个模仿淘宝ued博客左边的菜单切换动画效果
- 基于jquery实现左右按钮点击的图片切换效果
- jquery实现的全屏带左右切换按钮和类似风车四叶子旋转切换效果的全屏广告源
- jQuery点击按钮实现div的隐藏和显示切换效果
- 不使用JS,使用CSS3 target 以及 动画效果实现,点击一下弹出,并且保持弹出状态,然后再点击一下弹回的导航栏(或者可以叫做按钮)
- jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
- jQuery实现点击单选按钮切换选中状态效果
- 基于jQuery实现的菜单切换效果
- Jquery 实现 点击按钮后倒计时效果,多用于实现发送手机验证码、邮箱验证码
- jquery+css实现动感的图片切换效果
- 分享一个CSS3实现的动态内容标签页切换效果教程
- 分享一个CSS3和jQuery实现的模糊显示效果 - 帮助你的访问用户更好的阅读内容
- 分享一个CSS3和jQuery实现的模糊显示效果 - 帮助你的访问用户更好的阅读内容
- 使用选项卡TabWidget与TabHost实现底部或者顶部四个分类按钮 点击切换对应的fragment
- jquery实现marquee效果(文字或者图片的水平垂直滚动)
- 使用jQuery实现类似开关按钮的效果