使用CSS3和Checkbox实现JQuery的一些效果
程序员文章站
2022-05-07 19:26:36
这篇文章主要介绍了使用CSS3和Checkbox实现JQuery的一些效果,包括show()/hide()和fadeIn()/fadeOut()以及slideUp()/slideDown()的实现,需要的朋友可以参考下... 15-08-03...
show()/hide()的实现
show()/hide()的实现主要控制元素的display属性。
html:
xml/html code复制内容到剪贴板
- <div id="box">
- <input type="checkbox" id="sh"/>
- <label for="sh">show/hide</label>
- <div id="shbox">
- 点击上面的show/hide实现show()/hide()
- </div>
- </div>
css:
css code复制内容到剪贴板
- #box{
- position:relative;
- }
- #box *:not(#shbox){
- display:inline-block;
- }
- input{
- position:absolute;
- left:-10000000px;
- }
- :checked~#shbox{
- display:none;
- }
- label{
- width:100px;
- height:30px;
- line-height:30px;
- text-align:center;
- border:1px solid green;
- position:absolute;
- left:0px;
- cursor:pointer;
- border-radius:5px;
- }
- #shbox{
- background:#ccc;
- color:red;
- width:200px;
- height:200px;
- border:1px solid blue;
- box-sizing:border-box;
- padding:50px;
- position:absolute;
- top:50px;
- }
运行结果:https://jsfiddle.net/dwqs/1lykzl2f/1/embedded/result/
fadein()/fadeout()的实现
fadein()/fadeout()的实现主要是控制元素的opcity属性。html依旧采用上面的,修改css如下:
css code复制内容到剪贴板
- :checked~#shbox{
- opacity:0;
- }
fadein()/fadeout()可以控制渐显/渐退的速度,同样给#shbox添加transition属性可以模拟这个效果:
css code复制内容到剪贴板
- #shbox{
- transition:opacity 2s;
- }
运行效果:https://jsfiddle.net/dwqs/2txfyr1e/embedded/result/
slideup()/slidedown()的实现
slideup()/slidedown()通过改变元素的高度来实现上卷和下拉。html依旧采用上面的,css修改如下:
css code复制内容到剪贴板
- :checked~#shbox{
- height:0px;
- }
- #shbox{
- background:#ccc;
- overflow-y:hidden;
- color:red;
- width:200px;
- height:200px;
- box-sizing:border-box;
- transition:all 2s;
- position:absolute;
- top:50px;
- }
#shbox添加了 overflow-y:hidden,是为了连文本也实现隐藏,不然,#shbox里面的文本仍然会显示; transition实现一个过渡;同时去掉了border属性。
运行结果:https://jsfiddle.net/dwqs/xyu58nu8/3/embedded/result/
推荐阅读
-
纯css3使用vw和vh实现自适应的方法
-
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
-
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
-
使用vue2实现带地区编号和名称的省市县三级联动效果
-
使用jQuery实现的掷色子游戏动画效果
-
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
-
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
-
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
-
使用vue.js实现checkbox的全选和多个的删除功能
-
jquery和css3实现的炫酷时尚的菜单导航