使用CSS3和Checkbox实现JQuery的一些效果


Posted in HTML / CSS onAugust 03, 2015

show()/hide()的实现

show()/hide()的实现主要控制元素的display属性。
html:

XML/HTML Code复制内容到剪贴板
  1. <div id="box">  
  2.     <input type="checkbox" id="sh"/>  
  3.     <label for="sh">show/hide</label>  
  4.     <div id="shbox">  
  5.         点击上面的show/hide实现show()/hide()   
  6.     </div>  
  7. </div>  

css:

CSS Code复制内容到剪贴板
  1. #box{   
  2.     position:relative;   
  3. }   
  4. #box *:not(#shbox){   
  5.     display:inline-block;   
  6. }   
  7. input{   
  8.     position:absolute;   
  9.     left:-10000000px;   
  10. }   
  11. :checked~#shbox{   
  12.     display:none;   
  13. }   
  14. label{   
  15.     width:100px;   
  16.     height:30px;   
  17.     line-height:30px;   
  18.     text-align:center;   
  19.     border:1px solid green;   
  20.     position:absolute;   
  21.     left:0px;   
  22.     cursor:pointer;   
  23.     border-radius:5px;   
  24. }   
  25. #shbox{   
  26.     background:#ccc;   
  27.     color:red;   
  28.     width:200px;   
  29.     height:200px;   
  30.     border:1px solid blue;   
  31.     box-sizing:border-box;   
  32.     padding:50px;   
  33.     position:absolute;   
  34.     top:50px;   
  35. }  

运行结果:https://jsfiddle.net/dwqs/1LykzL2f/1/embedded/result/
fadeIn()/fadeOut()的实现

fadeIn()/fadeOut()的实现主要是控制元素的opcity属性。html依旧采用上面的,修改css如下:

CSS Code复制内容到剪贴板
  1. :checked~#shbox{   
  2.     opacity:0;   
  3. }  

fadeIn()/fadeOut()可以控制渐显/渐退的速度,同样给#shbox添加transition属性可以模拟这个效果:

CSS Code复制内容到剪贴板
  1. #shbox{   
  2.     transition:opacity 2s;   
  3. }  

运行效果:https://jsfiddle.net/dwqs/2txfyr1e/embedded/result/
slideUp()/slideDown()的实现

slideUp()/slideDown()通过改变元素的高度来实现上卷和下拉。html依旧采用上面的,css修改如下:

CSS Code复制内容到剪贴板
  1. :checked~#shbox{   
  2.     height:0px;   
  3. }   
  4. #shbox{   
  5.     background:#ccc;   
  6.     overflow-y:hidden;   
  7.     color:red;   
  8.     width:200px;   
  9.     height:200px;   
  10.     box-sizing:border-box;   
  11.     transition:all 2s;   
  12.     position:absolute;   
  13.     top:50px;   
  14. }  

#shbox添加了 overflow-y:hidden,是为了连文本也实现隐藏,不然,#shbox里面的文本仍然会显示; transition实现一个过渡;同时去掉了border属性。
运行结果:https://jsfiddle.net/dwqs/xyu58nu8/3/embedded/result/

HTML / CSS 相关文章推荐
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
纯css3实现照片墙效果
Dec 26 HTML / CSS
利用CSS3实现开门效果实例源码
Aug 22 HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 HTML / CSS
纯html5+css3下拉导航菜单实现代码
Mar 18 HTML / CSS
详解HTML5中div和section以及article的区别
Jul 14 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 HTML / CSS
canvas实现烟花的示例代码
Jan 16 HTML / CSS
H5离线存储Manifest原理及使用
Apr 28 HTML / CSS
HTML5 背景的显示区域实现
Jul 09 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 HTML / CSS
CSS3中的clip-path使用攻略
Aug 03 #HTML / CSS
利用SVG和CSS3来实现一个炫酷的边框动画
Jul 22 #HTML / CSS
CSS3中的content属性使用示例
Jul 20 #HTML / CSS
详解CSS3中border-image的使用
Jul 18 #HTML / CSS
CSS3中颜色线性渐变实战
Jul 18 #HTML / CSS
CSS3制作Dropdown下拉菜单的方法
Jul 18 #HTML / CSS
使用CSS3来绘制一个月食图案
Jul 18 #HTML / CSS
You might like
实用函数10
2007/11/08 PHP
PHP学习 变量使用总结
2011/03/24 PHP
php验证码生成代码
2015/11/11 PHP
深入理解PHP原理之执行周期分析
2016/06/01 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
javascript+css3 实现动态按钮菜单特效
2016/02/06 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
Javascript简写条件语句(推荐)
2016/06/12 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
2017/06/12 Javascript
vue中使用vue-cli接入融云实现即时通信
2019/04/19 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
js代码实现轮播图
2020/05/04 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
2020/06/28 Javascript
python使用生成器实现可迭代对象
2018/03/20 Python
详解python读取和输出到txt
2019/03/29 Python
django foreignkey(外键)的实现
2019/07/29 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
css3学习心得分享
2013/08/19 HTML / CSS
中邮全球便购:中国邮政速递物流
2017/03/04 全球购物
新西兰演唱会和体育门票网站:Ticketmaster新西兰
2017/10/07 全球购物
承认错误的检讨书
2014/01/30 职场文书
运动会通讯稿150字
2014/02/15 职场文书
学习考察心得体会
2014/09/04 职场文书
明星邀请函
2015/02/02 职场文书
死亡诗社观后感
2015/06/05 职场文书
教师师德工作总结2015
2015/07/22 职场文书
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL
动画《朋友游戏》公开佐藤友生绘制的开播纪念绘
2022/04/06 日漫
python中validators库的使用方法详解
2022/09/23 Python