使用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 05 HTML / CSS
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
Nov 11 HTML / CSS
浅谈CSS3 动画卡顿解决方案
Jan 02 HTML / CSS
浅谈HTML5新增及移除的元素
Jun 27 HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
Jun 25 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
May 28 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
Mar 20 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 HTML / CSS
用canvas画心电图的示例代码
Sep 10 HTML / CSS
recorder.js 基于Html5录音功能的实现
May 26 HTML / CSS
CSS3实现列表无限滚动/轮播效果
Jun 23 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
php5.3 goto函数介绍和示例
2014/03/21 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
php判断用户是否关注微信公众号
2016/07/22 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
前端开发的开始---基于面向对象的Ajax类
2010/09/17 Javascript
jQuery对表单的操作代码集合
2011/04/06 Javascript
js弹出的对话窗口永远保持居中显示
2012/12/15 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
React学习笔记之事件处理(二)
2017/07/02 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
详解angular分页插件tm.pagination二次触发问题解决方案
2018/07/20 Javascript
Vuex模块化应用实践示例
2020/02/03 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
python实现的一个火车票转让信息采集器
2014/07/09 Python
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
Python查询IP地址归属完整代码
2017/06/21 Python
python实现黑客字幕雨效果
2018/06/21 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
python numpy 按行归一化的实例
2019/01/21 Python
在pycharm下设置自己的个性模版方法
2019/07/15 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
python实现图片,视频人脸识别(opencv版)
2020/11/18 Python
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
销售类求职信
2014/06/13 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
群众路线个人整改方案
2014/10/25 职场文书
故宫导游词
2015/01/31 职场文书
2015年销售内勤工作总结
2015/04/27 职场文书
任命书格式模板
2015/09/22 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书