萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> 使用CSS3和Checkbox實現JQuery的一些效果

使用CSS3和Checkbox實現JQuery的一些效果

 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/

copyright © 萬盛學電腦網 all rights reserved