使用CSS3和Checkbox实现JQuery的一些效果
show()/hide()的实现
show()/hide()的实现主要控制元素的display属性。
html:
- <div id="box">
- <input type="checkbox" id="sh"/>
- <label for="sh">show/hide</label>
- <div id="shbox">
- 点击上面的show/hide实现show()/hide()
- </div>
- </div>
css:
- #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如下:
- :checked~#shbox{
- opacity:0;
- }
fadeIn()/fadeOut()可以控制渐显/渐退的速度,同样给#shbox添加transition属性可以模拟这个效果:
- #shbox{
- transition:opacity 2s;
- }
运行效果:https://jsfiddle.net/dwqs/2txfyr1e/embedded/result/
slideUp()/slideDown()的实现
slideUp()/slideDown()通过改变元素的高度来实现上卷和下拉。html依旧采用上面的,css修改如下:
- :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/
相关文章
- jQuery+CSS3实现自动轮播切换焦点图特效源码是一个自动轮播切换焦点图代码,分部加载小图组合效果。本段代码适应于所有网页使用2015-07-08
jQuery+CSS3实现的鼠标点击显示动画过渡效果特效源码
是一款包含两种不同切换效果的jQuery特效的代码。本段代码适应于所有网页使用,有兴趣的朋友们可以前来下载使用2015-07-07基于jQuery+CSS3+HTML5实现的炫酷全屏垂直滚动切换幻灯片特效源码
HTML5全屏垂直滚动切换幻灯片是一段基于jQuery+CSS3+HTML5实现的炫酷全屏垂直滚动切换幻灯片特效代码,本段代码适应于所有网页使用,有兴趣的朋友们可以前来下载使用2015-07-06
最新评论