使用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 相关文章推荐
Web页面中八种创建多列等高(等高列布局)的实现技术
Dec 24 HTML / CSS
CSS3属性background-size使用指南
Dec 09 HTML / CSS
CSS3实现缺角矩形,折角矩形以及缺角边框
Dec 20 HTML / CSS
css3实现动画的三种方式
Aug 24 HTML / CSS
canvas绘制表情包的示例代码
Jul 09 HTML / CSS
详解Html5中video标签那些属性和方法
Jul 01 HTML / CSS
HTML5边玩边学(3)像素和颜色
Sep 21 HTML / CSS
移动HTML5前端框架—MUI的使用
Dec 18 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
Oct 17 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
Oct 14 HTML / CSS
如何给HTML标签中的文本设置修饰线
Nov 18 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
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
php5.3 注意事项说明
2013/07/01 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
PHP下载远程图片的几种方法总结
2017/04/07 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
2012/07/20 Javascript
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
JavaScript中的连字符详解
2013/11/28 Javascript
jQuery select表单提交省市区城市三级联动核心代码
2014/06/09 Javascript
使用Node.js配合Nginx实现高负载网络
2015/06/28 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
微信小程序滑动选择器的实现代码
2018/08/10 Javascript
React降级配置及Ant Design配置详解
2018/12/27 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
javascript如何实现create方法
2019/11/04 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
mustache.js实现首页元件动态渲染的示例代码
2020/12/28 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
对python3新增的byte类型详解
2018/12/04 Python
python 变量初始化空列表的例子
2019/11/28 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
平民服装店创业计划书
2014/01/17 职场文书
土木工程师职业规划范文
2014/03/07 职场文书
团日活动总结范文
2014/04/25 职场文书
公路绿化方案
2014/05/12 职场文书
触电现场处置方案
2014/05/14 职场文书
大连导游词
2015/02/12 职场文书
最新的离婚协议书范本!
2019/07/02 职场文书