亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb

首頁 > 開發 > CSS > 正文

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

2024-07-11 09:00:27
字體：大 中 小
來源：轉載
供稿：網友

 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/

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb
亚洲精品之草原avav久久| 国产一区二区三区直播精品电影| 国产成人高清激情视频在线观看| 97久久国产精品| 欧美限制级电影在线观看| 26uuu久久噜噜噜噜| 国产精品18久久久久久麻辣| 日本欧美爱爱爱| 欧美日韩中文字幕综合视频| 久久久久久一区二区三区| 亚洲第一色中文字幕| 美女999久久久精品视频| 欧美高清性猛交| 欧美极品少妇xxxxⅹ裸体艺术| 一区二区三区久久精品| 另类天堂视频在线观看| 性视频1819p久久| 一区二区日韩精品| 538国产精品视频一区二区| 欧美午夜无遮挡| www.精品av.com| 俺去啦;欧美日韩| 国产精品第一区| 午夜精品一区二区三区在线视| 欧美床上激情在线观看| 视频在线一区二区| 日韩国产一区三区| 国产精品欧美一区二区三区奶水| 97免费在线视频| 亚洲欧美制服综合另类| 欧美午夜www高清视频| 美女精品视频一区| 欧美整片在线观看| 北条麻妃一区二区三区中文字幕| 亚洲影院污污.| 国产成人aa精品一区在线播放| 欧美激情网友自拍| 岛国av一区二区| 黑丝美女久久久| 国产日韩专区在线| 美女少妇精品视频| 动漫精品一区二区| 国产免费一区二区三区在线观看| 国产日韩精品在线观看| 亚洲精品在线不卡| 欧美天天综合色影久久精品| 久久久久国产精品免费| 国产精品亚洲综合天堂夜夜| 久久精彩免费视频| 激情av一区二区| 亚洲a成v人在线观看| 国产精品久久中文| 国产精品成人免费视频| 久色乳综合思思在线视频| 久久精品中文字幕| 国产精品成人一区二区| 欧美精品www在线观看| 国产精品999| 92看片淫黄大片看国产片| 亚洲欧美一区二区三区在线| 国产精品自产拍在线观看中文| 国产suv精品一区二区三区88区| 26uuu另类亚洲欧美日本一| 91久久国产综合久久91精品网站| 国产日韩欧美黄色| 国产精品小说在线| 国产精品国产亚洲伊人久久| 青草热久免费精品视频| 日韩精品视频免费专区在线播放| 亚洲综合色激情五月| 日韩精品在线观看视频| 国内精品久久久久久久久| 色婷婷综合成人av| 亚洲精品国产综合区久久久久久久| 国产欧美久久一区二区| 影音先锋日韩有码| 亚洲japanese制服美女| 97视频在线免费观看| 蜜臀久久99精品久久久无需会员| 国产精品亚洲美女av网站| 欧美激情视频在线免费观看 欧美视频免费一| 日本精品视频网站| 在线精品视频视频中文字幕| 亚洲v日韩v综合v精品v| 国产成人精品免费久久久久| 成人a在线视频| 7777kkkk成人观看| 国产大片精品免费永久看nba| 久久躁日日躁aaaaxxxx| 91欧美精品午夜性色福利在线| 久久影院免费观看| 国产欧美一区二区三区在线| 亚洲一区二区三区毛片| 久久av资源网站| 亚洲人成电影网站色…| 亚洲成色777777女色窝| 久久视频国产精品免费视频在线| 欧美高清自拍一区| 国产精品久久久久久久久久久久久久| 国产精品久久久久久av下载红粉| 亚洲深夜福利在线| 少妇高潮 亚洲精品| 欧美二区乱c黑人| 精品亚洲夜色av98在线观看| 日韩欧美亚洲成人| 亚洲天堂免费观看| 色综合久综合久久综合久鬼88| 国产欧美精品xxxx另类| 亚洲老司机av| 亚洲欧美日韩一区二区在线| 成人黄色av网站| 亚洲人成网站色ww在线| 日韩在线视频网| 欧美国产极速在线| 国产精品福利无圣光在线一区| 日本欧美一级片| 欧美黑人狂野猛交老妇| 亚洲a级在线播放观看| 亚洲激情视频网| 亚洲精品永久免费| 精品成人在线视频| 在线观看成人黄色| 欧美激情中文字幕乱码免费| 性欧美亚洲xxxx乳在线观看| 91高清在线免费观看| 亚洲天堂网在线观看| 欧美一级电影免费在线观看| 疯狂做受xxxx欧美肥白少妇| 欧美日韩一区二区免费在线观看| 日韩中文字幕不卡视频| 欧美色欧美亚洲高清在线视频| 久久免费在线观看| 久久久成人精品视频| 久久精品91久久香蕉加勒比| 亚洲人成网站色ww在线| 国产精品永久免费| 久久久久久免费精品| 91久久久久久久久久久久久| 国产成人免费av| 国产精品网红直播| 2019最新中文字幕| 亚洲少妇激情视频| 影音先锋日韩有码| 日本亚洲欧美成人| 日韩福利视频在线观看| 国产精品成人一区二区三区吃奶| 亚洲精品98久久久久久中文字幕| 一区二区三区日韩在线| 久久夜精品va视频免费观看| 欧美激情视频给我| 欧洲永久精品大片ww免费漫画| 91理论片午午论夜理片久久| 国产有码在线一区二区视频| 欧美激情视频一区二区三区不卡| 亚洲色图第三页| 欧美性xxxxxxxxx| 亚洲无限乱码一二三四麻| 欧美激情视频在线观看| 丝袜亚洲另类欧美重口| 国产日韩精品视频| 欧美中文字幕视频在线观看| 亚洲精品免费在线视频| 午夜精品美女自拍福到在线| 2019av中文字幕|