使用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选择器的研究(详解)
Sep 16 HTML / CSS
CSS3 please 跨浏览器的CSS3产生器
Mar 14 HTML / CSS
css3实现顶部社会化分享按钮示例
May 06 HTML / CSS
CSS3 中的@keyframes介绍
Sep 02 HTML / CSS
CSS3区域模块region相关编写示例
Aug 28 HTML / CSS
CSS3 Flex 弹性布局实例代码详解
Nov 01 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 HTML / CSS
详解使用canvas保存网页为pdf文件支持跨域
Nov 23 HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
May 09 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
Jun 22 HTML / CSS
微信html5页面调用第三方位置导航的示例
Mar 14 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 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
php下获取客户端ip地址的函数
2010/03/15 PHP
PHPThumb图片处理实例
2014/05/03 PHP
PHP MSSQL 分页实例
2016/04/13 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
php使用pecl方式安装扩展操作示例
2019/08/12 PHP
javascript 清除输入框中的数据
2009/04/13 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
js检验密码强度(低中高)附图
2014/06/05 Javascript
与Math.pow 相反的函数使用介绍
2014/08/04 Javascript
自己编写的支持Ajax验证的JS表单验证插件
2015/05/15 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
2015/11/24 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
vue实现底部菜单功能
2018/07/24 Javascript
[43:43]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第三场 11.29
2020/12/02 DOTA
python使用Matplotlib画条形图
2020/03/25 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
详解Django 时间与时区设置问题
2019/07/23 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
Python 在 VSCode 中使用 IPython Kernel 的方法详解
2020/09/05 Python
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
党校自我鉴定范文
2013/10/02 职场文书
高中英语教学反思
2014/02/04 职场文书
《临死前的严监生》教学反思
2014/02/13 职场文书
创先争优标语
2014/06/27 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
住宿生擅自离校检讨书
2014/09/22 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript
Django实现聊天机器人
2021/05/31 Python
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers