使用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教程(4):网页边框和网页文字阴影
Apr 02 HTML / CSS
利用CSS3的checked伪类实现OL的隐藏显示的方法
Dec 18 HTML / CSS
IE下实现类似CSS3 text-shadow文字阴影的几种方法
May 11 HTML / CSS
纯CSS3实现绘制各种图形实现代码详细整理
Dec 26 HTML / CSS
非常震撼的纯CSS3人物行走动画
Feb 24 HTML / CSS
css3新单位vw、vh的使用教程
Mar 23 HTML / CSS
HTML5实现QQ聊天气泡效果
Jun 26 HTML / CSS
自定义html标记替换html5新增元素
Oct 17 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 HTML / CSS
深入剖析HTML5 内联框架iFrame
May 04 HTML / CSS
深入浅析HTML5中的article和section的区别
May 15 HTML / CSS
详解HTML5中CSS外观属性
Sep 10 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
example2.php
2006/10/09 PHP
php 在线打包_支持子目录
2008/06/28 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
PHP手机号中间四位用星号*代替显示的实例
2017/06/02 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
myEvent.js javascript跨浏览器事件框架
2011/10/24 Javascript
标题过长使用javascript按字节截取字符串
2014/04/24 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
jQuery $命名冲突解决方案汇总
2014/11/13 Javascript
如何在Linux上安装Node.js
2016/04/01 Javascript
js仿3366小游戏选字游戏
2016/04/14 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
JavaScript requestAnimationFrame动画详解
2017/09/14 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
Python去除字符串两端空格的方法
2015/05/21 Python
总结python实现父类调用两种方法的不同
2017/01/15 Python
python读取excel表格生成erlang数据
2017/08/26 Python
python中logging库的使用总结
2017/10/18 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
Python Tornado批量上传图片并显示功能
2020/03/26 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
python函数超时自动退出的实操方法
2020/12/28 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
加拿大时尚少女服装品牌:Garage
2016/10/10 全球购物
介绍一下你对SOA的认识
2016/04/24 面试题
公积金单位接收函
2014/01/11 职场文书
成人继续教育实施方案
2014/03/01 职场文书
《荷花》教学反思
2014/04/16 职场文书
golang 实现Location跳转方式
2021/05/02 Golang