您現在的位置是:電腦技術吧?>? 故障問題 ??>??實現了三個效果,實現了效果??>??正文詳情

實現了三個效果,實現了效果

慕亦竹2019-11-27 11:51:46 人圍觀
簡介價值實現的效果show()/hide()show()/hide()的實現主要控制元素的display屬性。HTML:XML/HTML代碼復制內容到剪貼板DIVID= BOX輸將目的實現效果

show()/hide()的實現show()/hide()的實現主要控制元素的display屬性。

html:XML/HTML Code復制內容到剪貼板

    div id=box input type=checkbox id=sh/ label for=shshow/hide/label div id=shbox 點擊上面的show/hide實現show()/hide() /div /div
css:CSS Code復制內容到剪貼板
    #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如下:CSS Code復制內容到剪貼板

    :checked~#shbox{ opacity:0; }
fadeIn()/fadeOut()可以控制漸顯/漸退的速度,同樣給#shbox添加transition屬性可以模擬這個效果:CSS Code復制內容到剪貼板
    #shbox{ transition:opacity 2s; }
運行效果:https://jsfiddle.net/dwqs/2txfyr1e/embedded/result/slideUp()/slideDown()的實現slideUp()/slideDown()通過改變元素的高度來實現上卷和下拉。

html依舊采用上面的,css修改如下:CSS Code復制內容到剪貼板

    :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/

版權聲明:本文由 慕亦竹 整理編輯。

原標題:實現效果這種說法對嗎,效果

轉載注明出處:http://www.dn9ww09s.icu/fault/14573.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 視頻怎么剪輯,如何剪輯視頻中的一段

    視頻怎么剪輯,如何剪輯視頻中的一段 相關圖片卡點視頻怎么剪輯有兩種方法可以使用love clip自由剪輯視頻片段。首先,單擊主界面右上角預覽框時間進度條上的向下箭頭(快捷鍵Ctrl e),打開創新的時間線面板,將音頻波形手機怎...

  • 什么是響應式編程,響應式編程

    什么是響應式編程,響應式編程 相關圖片spring5響應式編程如今,響應式網頁設計無疑非常流行。對于新人來說,響應式設計聽起來有點復雜,但事實上,它比你想象的要簡單得多。為了幫助您開始響應式web設計,我編寫了一個...

  • 瀏覽器卡慢怎么解決,瀏覽器打開慢什么原因

    瀏覽器卡慢怎么解決,瀏覽器打開慢什么原因 相關圖片ie瀏覽器閃退怎么解決在使用win7系統時,當打開IE時沒有響應時,您會選擇終止進程,然后重新打開IE。但是如果再次發生這種情況,您會怎么做?你不能一直重新開始,是嗎?下面的超...

  • tomcat9環境變量配置,tomcat8配置環境變量

    tomcat9環境變量配置,tomcat8配置環境變量 相關圖片maven環境變量配置Tomcat是Jakarta項目的核心項目,它是一個開源的、免費的輕量級應用服務器,是開發和調試JSP程序的首選。盡管Tomcat處理靜態html的能力不如Apmysql環境變量配置...

  • 關于選項卡的切換,切換選項卡在哪里

    關于選項卡的切換,切換選項卡在哪里 相關圖片網頁選項卡切換效果:目標是什么?MDN描述如下::target:target偽類表示唯一元素(如果有的話),其ID與frag匹配tab選項卡切換...

  • win7沒有藍牙圖標,win7藍牙圖標

    win7沒有藍牙圖標,win7藍牙圖標 相關圖片win7連接藍牙很多時候我忘了帶U盤或數據線,如果我想傳輸文件該怎么辦?事實上,電腦通過藍牙傳輸文件非常方便,但我想使用藍牙時找不到藍牙圖標?今天,我要教你如何設置win7系...

  • DNF吧,DNF

    DNF吧,DNF 相關圖片dnf鬼泣H5正處于風暴的尖端。很多學生想從這一次開始。具體的演奏方法并不簡單。看看騰訊飛牛學生總結的全過程。從早期的規劃到實施,彩色字體動畫的加載都不能掉下來。有反省、...

  • 摩拜隱形貼紙,摩拜618貼紙

    摩拜隱形貼紙,摩拜618貼紙 相關圖片摩拜成立摩比自行車最近推出了收集貼紙發送紅包的活動。許多小合伙人對此表示懷疑。這兩張貼紙有收藏嗎?這可不像支付寶的奉獻精神那樣是個噱頭。今天,超人小版將為大家介紹...

  • clip path,clip

    clip path,clip 相關圖片path根據她過去的經驗,這個網站的HTML和CSS完全在她的能力范圍內,所以我幫她完成了這個效果。顯示導航被修剪的效果不是一件簡單的事情。我在圖片中看到的第一個反應是Octopath...

  • 0x8024402f,0x80071a90

    0x8024402f,0x80071a90 相關圖片win10 0x8024402c在上一個教程中,超人已經教過您如何解決win10升級失敗提示中的錯誤0xc190101-0x30018。這一次,超人教你如何在win10更新失敗提示中解決錯誤0錯誤0x800f0986...

熱評文章

  • 切換輸入法,如何切換輸入法

    切換輸入法,如何切換輸入法 相關圖片輸入法切換快捷鍵您是否遇到win10系統的輸入方法無法切換的情況?如果是,我們該怎么辦?我相信很多朋友都遇到過這個問題。別擔心。超人編輯將為你分享Win10的解決方案輸入法怎么...

  • 如何安裝office2013,安裝office2013

    如何安裝office2013,安裝office2013 相關圖片office怎么安裝Win10系統已發布。我相信很多小業主也升級了系統。作為一個非常重要的辦公軟件,office是安裝必備的軟件之一,但是如何安裝win10系統呢?今天超人帶來的woffice2013安裝回...

  • 導航欄導航欄,pyqt5導航欄怎樣實現

    導航欄導航欄,pyqt5導航欄怎樣實現 相關圖片導航欄的下拉菜單以上是一個渲染,代碼如下:htmlxml/HTML code將內容復制到剪貼板navul class=NAV ullia href=/homepage/a/Li500導航第一導航欄導航...

  • win10新功能能,win10有哪些新功能

    win10新功能能,win10有哪些新功能 相關圖片windows10分屏最近,微軟對win10系統進行了第一次重大更新,帶來了許多新功能和功能上的變化。除了明顯的變化外,這次更新還帶來了一些隱藏的功能。現在讓我們去超人那里把你可能找...

  • Git使用詳細教程,skyiar詳細使用教程

    Git使用詳細教程,skyiar詳細使用教程 相關圖片pspice使用教程什么是柔性盒子?靈活的可伸縮性,箱型箱,這可以理解為一種新的箱型膨脹箱模型。這是CSS3規范提出的新一代布局模塊,它基于我們非常熟悉的原始塊、內聯塊和內聯塊...

  • win10系統盤多大,系統盤

    win10系統盤多大,系統盤 相關圖片win10重裝系統教程微軟發布的Windows 10不僅有計算機操作系統,還有移動操作系統。windows 10手機操作系統類似于計算機的文件系統,這使得我們更容易管理手機中存儲的文硬盤分區教程...

  • viewport詳解,html viewport

    viewport詳解,html viewport 相關圖片meta viewportHTML5的視窗使我們開發的應用程序或頁面大小能夠適應各種手機的不同分辨率和屏幕大小。viewport語法簡介:content=height=[像素值|設備高度wpf viewport3d...

  • 如何簽到領流量,每天簽到領流量

    如何簽到領流量,每天簽到領流量 相關圖片免費簽到領流量近日,百度移動發起了流量采集登錄活動。很多小伙伴不知道如何接收百度手機的流量報到和投遞。屆時,超人軟件將為您帶來手機百度iPhone版的簽到和發送流量的方法...

  • 標準編寫規范,規范標準的編寫方法

    標準編寫規范,規范標準的編寫方法 相關圖片產品規范編寫標準作為一般規則,避免過度約束,不要添加不必要的約束CSS代碼將內容復制到剪貼板//bad UL?someid{..}。菜單?otherid{..}/好的?some文檔編寫規范...

  • 0xc1900101,0x8024000b

    0xc1900101,0x8024000b 相關圖片win100xc1900101將win7或win8.1升級到win10并不容易。自7月29日windows 10正式發布以來,各種問題層出不窮。其中之一是錯誤代碼0xc19000x20017...

關注微信

变脸官网查询