应用CSS3和Checkbox完成JQuery的1些实际效果

日期:2020-10-19 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

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完成1个过渡;另外去掉了border特性。
运作結果:https://jsfiddle.net/dwqs/xyu58nu8/3/embedded/result/