您现在的位置是：网站首页> 编程资料编程资料

使用CSS3和Checkbox实现JQuery的一些效果jQuery+CSS3实现自动轮播切换焦点图特效源码jQuery+CSS3实现的鼠标点击显示动画过渡效果特效源码基于jQuery+CSS3+HTML5实现的炫酷全屏垂直滚动切换幻灯片特效源码

2021-09-05 1000人已围观

简介 这篇文章主要介绍了使用CSS3和Checkbox实现JQuery的一些效果,包括show()/hide()和fadeIn()/fadeOut()以及slideUp()/slideDown()的实现,需要的朋友可以参考下

show()/hide()的实现

show()/hide()的实现主要控制元素的display属性。
html:

XML/HTML Code复制内容到剪贴板
  1. <div id="box">  
  2.     <input type="checkbox" id="sh"/>  
  3.     <label for="sh">show/hidelabel>  
  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/

上一篇：不用table而实现等分DIV的方法jquery实现的div拖动排序插件jquery.sortable源码CSS：Table-cell属性的妙用让div也能享受table定位的好处实现div垂直居中的display:table-cell方法示例介绍

下一篇：CSS3的一个简单导航栏实现html+css+js实现导航栏滚动渐变效果不可思议的CSS导航栏下划线跟随效果html+css 实现简易导航栏功能CSS中的导航栏和下拉菜单的实现纯CSS实现导航栏下划线跟随滑动效果使用CSS制作立体导航栏div+css实现带箭头的面包屑导航栏CSS导航栏及弹窗示例代码纯CSS实现导航栏Tab切换效果CSS利用伪元素实现导航栏斜线分隔

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网