使用純Javascript實現影像替換的過渡效果

在我創建的網站上，我有一些手風琴，每個手風琴的頂部都有一個圖像。當您打開手風琴時，裡面有一個描述，圖像會變成另一張。然後，當您關閉手風琴時，影像會切換回第一個影像。問題是我希望這個圖像變化有一個平滑的過渡，具有淡入淡出的效果，而現在它只是一個突然的變化。我該怎麼做？假設手風琴按鈕的id為「button」；包含第一張圖片（將更改為第二張圖片）的標籤的id為「firstimage」。這是JavaS

P粉458913655 2024-03-30 00:14:11 0  1  484

angular.js - Angular雙向綁定失效了！

先貼上代碼： controller: {代碼...} directive: {代碼...} html: {代碼...} 效果： 折疊時未折疊時前提交代完畢，我的期望是： 在未折疊時通過點擊折疊區域，讓其折疊回去，同時改變scope.isFold折疊標誌，讓...

伊谢尔伦 2017-05-15 16:52:42 0  4  963

vim - 求程式碼折疊的一段程式碼

已有的一段折疊代碼: {代碼...} 折疊前文本: 現有的折疊效果: 我的需求: 如下圖所示, 如何去掉前面的多餘的部分? 去掉的話看起來會清爽一些剛開始接觸Vim, 希望大家給給予指點

给我你的怀抱 2017-05-16 16:41:57 0  1  832

背景影像如何使用CSS濾鏡效果

我有一個JPEG文件，我正在將其用作搜尋頁面的背景圖像，並且我正在使用CSS進行設置，因為我正在Backbone.js上下文中工作：background-image:url("whatever.jpg");我想僅對背景套用CSS3模糊濾鏡，但是我不確定如何僅對該元素進行樣式設定。如果我嘗試：-webkit-filter:blur(5px);-moz-filter:blur(5p

P粉022285768 2023-08-20 13:28:36 0  2  540

javascript - slideToggle實現折疊選單效果，但是怎麼實現點擊這個選項展開，其他選項自動折疊呢？

想要實現的是折疊選單，但是slidetoggle 只能點擊才能收起來，我要的是點擊別的選項，已經展開的自動折疊，請問怎麼修改？程式碼如下： $("> li", this).each(function () { {程式碼...}

某草草 2017-07-05 11:06:06 0  3  1002

為什麼我的漸層效果在影像邊緣無法達到淡出效果？

我想讓影像的邊緣變得模糊，或至少模糊地淡出。我嘗試過的任何方法都不起作用，並且我查看了Stackoverflow上的所有問題。我使用的是CSS，而不是Sass。使問題變得複雜的是，我在頁面上有一個背景圖像，並用不透明度為0.8的白色蒙版覆蓋它。請問有人可以幫忙嗎？這是我的Codepen。 .screen{position:relative;width:100vw;height:100vh;disp

P粉317679342 2023-09-09 23:34:16 0  1  603

使用 Psuedo 元素的 CSS 懸停效果與主元素重疊

基本上，當我懸停時，我希望效果如下所示：我的網站在這裡程式碼如下忽略！重要：.cta-button-menu,.cta-button-menu::before{transition:all0.3slinear!important;width:120px!important;height:50px!important;display:inline-flex!important;justify-cont

P粉838563523 2024-03-20 10:31:28 0  1  388

javascript - 如何禁止sarafi、IE在行動端出現的橡皮筋效果

在ios上的safari瀏覽器中，當網頁捲動到最頂端的時候，還可以像橡皮筋一樣再滾一段距離，鬆手後回彈。在window的平板上也有這個效果。請問怎麼用css禁止這個效果，因為很多時候會影響頁面內部的捲動。據我所知...

大家讲道理 2017-05-19 10:12:15 0  1  663

objective-c - IOS 如何實現網易雲音樂選擇頭像的ImagePicker

看了ImagePicker的介紹 ，很多都是採用用戶去選擇用照相機或是照片的方式。但我看到網易雲音樂更換頭像是在圖片庫旁邊加一個攝影機。效果如圖 想問有什麼方式可以達到這樣的效果

巴扎黑 2017-05-31 10:31:51 0  1  797

CSS技巧：建立水平線和居中文字

我正在嘗試製作一個帶有一些文字的水平分隔線。例如：-------------------------------------------------這裡是我的標題-------- ---------------------有沒有辦法在CSS中實現這個效果？顯然不需要使用所有的"-"破折號。

P粉248602298 2023-08-20 15:11:18 0  2  546

javascript - 怎麼讓頁面中固定定位的側邊欄的位置隨著捲軸動態增加呢？

需求是這樣的，一開始頁面的側邊欄是固定在頁面的某一位置（如：right:0;bottom:0）,隨著滾動條的滾動，為了防止側邊欄折疊頁腳部分（參考下圖），到一定位置，bottom的值隨身滾動條的增加而增加，效果類似起點中...

高洛峰 2017-06-26 10:53:43 0  2  1017

網址列/URL欄在移動Safari上滾動時保持不變

我正在使用React（16.8.6）建立一個網站，但在行動Safari上，當使用者開始滾動時，它不會像其他網站那樣折疊/縮小URL欄。包裝div的CSS如下所示：{...otherComponentsHere}constContentContainer=styled.div`height:100%;/*允許兩個列佔據瀏覽器視窗的整個高度*/overflow-y:auto;flex-grow: 1;di

P粉768045522 2023-08-16 12:29:00 0  1  619

如何將可折疊元素插入到 Flexbox 佈局中

我有一個圖像繞行的彈性盒佈局，我想在單擊圖像時顯示一些資訊。此資訊應顯示在包含影像的行與其正下方的行之間，而不移動「列」。這就是我想要的效果類型：http://olmenta.altervista.org（當您點擊一本書時）。這是我所做的：https://jsfiddle.net/fabhpnw9/3/varcoll=document.getElementsByClassName("re

P粉366946380 2024-03-19 23:20:59 0  2  436

javascript - 仿彈幕效果遇到的bug

利用定位寫的仿彈幕效果，一碰到邊緣就出現bug CSS： {代碼...} JS： {代碼...} 問題是彈幕只要碰到螢幕左邊文字就折行了： 但是輸入數字就不會這樣，我沒有給固定寬度，不知道為什麼會這樣？

習慣沉默 2017-06-30 09:58:38 0  2  929

背景與透明文字被剪掉

有沒有辦法用CSS製作出如下圖所示的從背景中切出透明文字效果？由於圖像取代了文字而失去了所有寶貴的SEO，這將是令人遺憾的。我首先想到了陰影，但我想不出任何東西......該圖片為網站背景，絕對定位的<img>標籤

P粉439804514 2024-03-25 16:47:36 0  2  680

如何增強兩個聯繫欄位的互動能力？

我需要將兩個字段（"CallUs"和"OurEmail"）居中，並同時使它們具有響應性。它們應該在小螢幕上堆疊在一起。我有內聯CSS來在大螢幕上正確定位它們，如圖所示，但它們在小螢幕上沒有像應該的那樣堆疊在一起。我使用內聯CSS是因為找不到CSS檔案來放置程式碼。是否可以使用內嵌CSS來修復這個問題？如果可以的話，這是我擁有的內聯CSS，它可以使這兩個字段在大

P粉725827686 2023-08-14 21:20:22 0  1  619

當bootstrap按鈕處於活動狀態時，為每個按鈕新增陰影/邊框的CSS

我正在使用React框架創建前端，並使用Bootstrap5.3進行設計。根據我的理解，Bootstrap現在作為標準已經取消了陰影效果。所以，如果按鈕處於啟動狀態，按鈕將不會顯示陰影/邊框，就像在Bootstrapv5.0文件中所示。 https://getbootstrap.com/docs/5.0/components/buttons/不幸的是，我不知道如何直接在程式碼中自訂單一按鈕。是否可以

P粉256487077 2023-08-17 23:54:27 0  1  557

建立一個懸停效果，將選單按鈕轉換為具有陰影複製版本的 x 形狀

首先我想承認我的標題很令人困惑，對此感到抱歉。我想要實現的是懸停時的以下效果：我的網站在這裡https://wordpress-493302-3130963.cloudwaysapps.com/我已經成功地使用css轉換完成了我想要實現的目標的一半，但無法看到創建按鈕的影子副本，如上圖所示。我的CSS如下.cta-button-menu:hover{transform:rotateZ(45deg)

P粉546257913 2024-04-04 11:55:21 0  2  554

flex css - 在一定高度後剪輯元素而不是換行

邊框代表靜態高度和寬度。我希望第5項和第6項保留在第二行，並剪掉第3項和第6項，而不是如圖所示第三次包裹。我如何透過Flex實現這個目標？為了補充這個問題，容器的寬度（用邊框顯示）可以透過使用者操作調整大小。當它很寬時。例如，如果它的寬度足以容納4個元素，則它將在第一行中顯示所有4個元素，而在第二行中顯示其餘的元素。當我們折疊容器的寬度時，我希望它最多有2行，如下圖所示。我希望結果看起來像這樣以便可

P粉785957729 2024-04-01 14:02:02 0  1  571

如何使用 svg 或 css 建立混合直線/曲線截面邊界？

對於我的應用程序，我正在創建一個具有非標準部分邊界的註冊頁面。你可以在這裡看到我試圖實現的效果：這不是一個簡單的圓弧——它有兩條直線，而且中間還有一個圓弧。據我所知，實現此類目標的最佳方法是使用SVG。問題是，白色區域將有一個影像覆蓋整個區域。出於演示目的，我將使用淺藍色。如果您使用帶有background-image屬性的標準div，則SVG的白色不透明，因此您會得到以下結果：提示稍後閱讀sha

P粉920835423 2023-09-02 11:35:13 0  1  669