純粋な Javascript を使用して画像置換のためのトランジション効果を実装する

私が作成した Web サイトには多数のアコーディオンがあり、それぞれの上部に画像があります。アコーディオンを開くと中に説明があり、画像が切り替わります。アコーディオンを閉じると、画像は最初の画像に戻ります。問題は、この画像の変更には、フェード効果を伴う滑らかな遷移を持たせたいのですが、現在は単なる突然の変更であるということです。どうすればいいですか？アコーディオン ボタンの ID が「button」で、最初の画像 (2 番目の画像に変更されます) を含むラベルの ID が「firstimage」だとします。これはJavaSです

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

java - 両側にボタンを実装して、中央のコンテンツを切り替えるにはどうすればよいですか?

両側にボタンを実装して、真ん中のコンテンツを切り替えることができます。ビューページャーを試してみましたが、プロジェクトで使用するのは簡単ではありません。他の解決策を探しています。

習慣沉默 2017-05-16 13:33:43 0  2  851

angular.js - AngularJs のみを使用して画像スライド切り替えを実装するにはどうすればよいですか?

Baidu にある AngularJS の画像カルーセル効果や画像スライド切り替え効果のコードは、基本的にブートストラップ コントロールに基づいて実装されています。 jQなどを使わずに純粋なAngularJSを実装する方法。モバイル淘宝網の赤ちゃんの詳細ページのトップバナーのように、スライドして写真を切り替える効果を実現しますか？

大家讲道理 2017-05-15 16:51:32 0  1  805

JavaScript - このストロークのアニメーション効果はどのようにして実現されるのでしょうか?

このストロークのような効果は、マウスをその上に置くと表示されますが、純粋な CSS で実現できますか?同じ効果を達成するにはどうすればよいでしょうか?

学习ing 2017-06-24 09:44:08 0  3  925

javascript - Alibaba Cloud はどのようにしてこの効果を実現しますか?

以下は Alibaba Cloud Web サイトへのリンクです。その中でのクイックプレイスの切り替え効果はどのように実現されますか? css: ウェブサイトのリンクアドレスに表示されません

大家讲道理 2017-06-12 09:32:10 0  3  957

JavaScript - フォトアルバム効果を実現するにはどうすればよいですか?どのプラグインを使用すればよいですか?

クリックして画像をプレビューし、左右にスライドして数字を表示します。リンクをコンピューターに貼り付けましたが、マウスをクリックしても効果がありません。使用できる成熟したプラグインはありますか?書いたマスクはプレビューできますが、左右を切り替えるのは書きにくいです。

PHP中文网 2017-06-30 09:56:05 0  4  801

angular.js - ui-router は複数の状態のコントローラーとビュー テンプレートを共有できますか?

たとえば、左側にリストがあり、リストの項目を切り替えると、右側のコンテンツが切り替わり、右側のコンテンツは同じ形式になります。 ng-router が list/:type を使用して 1 つのコントローラーとビューに一致する複数のルートを実装できることはわかっているので、コンテンツが 1 つのコントローラーのみを使用する場合に UI-router がこの効果を達成できるかどうかを尋ねたいと思います。

我想大声告诉你 2017-05-15 17:14:08 0  2  662

html5 - vue プロジェクトの vuex ストレージの問題

実装効果: ボタンをクリックして、左側のメニューの幅を切り替えます。 Vuex を使用してフィールド IsOpen を保存し、ナビゲーション コンポーネントとメニュー コンポーネントの両方がフィールドの初期値を取得しました。ナビゲーション コンポーネントのボタンをクリックすると、IsOpen の値も切り替わりますが、クラス名は切り替わります。幅を変更するものは切り替わりません。これ...

迷茫 2017-06-27 09:19:31 0  2  904

css - Angular2 でルーティングせずに複数のボタンの切り替え効果を実現するにはどうすればよいですか?

ルーティングせずにボタンをクリックすると、現在のボタンの背景色が青になり、他のボタンの背景色は灰色のままになるという効果を実現するにはどうすればよいですか?

漂亮男人 2017-05-15 17:13:11 0  3  787

angular.js - angular でページのスライド切り替えを実装する方法 具体的な効果は、毎日の Youxian ホームページと同じです。

1. Angular でスライドページ切り替えを実装する方法 2. {コード...} 3. デイリーエクセレントフレッシュのホームページのスクリーンショットエフェクト 4. 「デイリーエクセレントフレッシュ」が何を使っているのか分かりませんが、切り替えがスムーズで、データはすぐに読み込まれます。読み込み後、ローカルストレージが使用されているかどうかわかりません。ネットワークをオフにして、スライドしてページを切り替えても、ページのコンテンツは残ります...

黄舟 2017-05-15 17:08:45 0  3  670

CSS を使用して、行で折り返されたテキストの塗りつぶし効果を実現します。

ここに最小限の例があります: https://codepen.io/cpcpcpcpcpx/pen/VwZWoyJ、次の内容: .wrapper{width:200px;}h1{font-size:32px;font-family:Tahoma,Helvetica, sans -serif;line-height:50px;}.header-text{background:#aabbcc;padding-

P粉969666670 2023-08-25 00:09:03 0  2  554

JavaScript - 固定されているが URL が変更される YouTube のサイドバーに似たフロントエンド効果を作成するにはどうすればよいですか?

YouTube の左側にあるサイドバーで、クリックして登録チャンネルを切り替えると、サイドバーは固定されたままですが、URL アドレス バーが変化していることがわかります。これは、これを ajax に依存して実現すべきではないことを示しています。現在のプロジェクトでは、そのような効果を実現するために ajax を使用することはあまり考えていません。

世界只因有你 2017-06-12 09:28:05 0  5  901

モバイル上のボタンがフォーカスまたはアクティブのままになり、CSS アニメーションで問題が発生する

ボタンをクリックするたびにアニメーションを実現しようとしていますが、デスクトップでは正常に動作しますが、モバイルでは同じ効果を実現できません。最初にボタンをクリックし、次に別の場所をクリックして CSS のフォーカスを解除し、次にボタンをもう一度クリックしてアニメーション効果を得る必要があります。以下はコードスニペットです。 .btn_container{color:#35f8ff;position:relative;display:inline-block;text-align:center;margin:2.5remauto

P粉043295337 2023-08-28 15:14:37 0  1  526

シュリンク ラップ フレックス ボックスを使用してフレックス アイテムをラップし、中央に配置できるようにします。

パックされたコンテンツを含むフレックスボックスがあります。フレックスボックスをその内容に合わせて縮小するにはどうすればよいですか?私が解決しようとしている根本的な問題は、フレックスボックスを中央に配置することです。この画像は私の問題を説明しています: この目標を達成するにはどうすればよいでしょうか?これは純粋な CSS で実現できますか? Flexbox が 1 列目、2 列目、または 3 列目に折り返されるかどうかは、事前にはわかりません。要素の幅は既知です。高さは不明であることが望ましいですが、その方が簡単な場合は、一定の高さを決定することもできます。 width:min-content、...

P粉807239416 2023-09-13 15:26:47 0  1  582

影付きクローンバージョンでメニューボタンを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  475

リアクションクエリでの突然変異後の再検証: ステップバイステップガイド

next.js アプリケーション上で、react-query を使用したデータのフェッチと更新の基本的な実装があります。私の目標は、突然変異後にデータを更新することです。現在、データはタブが更新された場合にのみ更新されます。しかし、ユーザーの介入がなければそれは変わりません。タブが更新されたときにデータが更新されるのは、refetchOnWindowFocus のデフォルトの動作が原因であることがわかりました。しかし、サーバー側でデータが更新された後、どのようにして無効になるのでしょうか?関連するコードスニペットは次のとおりです。注: 私は、react-querySSR 機能を使用するために ...

P粉752290033 2024-03-25 21:53:26 0  2  456

javascript - vue2.0の子コンポーネントはデータを親コンポーネントに渡すだけですか?

これが親コンポーネント、これがサブコンポーネントです。効果を説明します。「All」、「Recommend」、「Tucao」をクリックして selectType の値を変更し、選択したボタンの背景を切り替えます。 「チェックマーク」をクリックして選択を表示し、選択を解除すると、サブコンポーネントの selectType とonlyContent の 2 つの値が表示されます...

给我你的怀抱 2017-05-19 10:34:07 0  2  785

アコーディオンスイッチ

Codepenで編集したアコーディオンエフェクトは正常に動作します。ただし、複数の質問をクリックした場合、現在の回答が開いている間、前の回答は閉じたいと考えています。これを達成する方法はありますか? Codepenのリンクはこちら また、FontAwesome4.7.0を使用する場合、以下のUnicodeは問題なく表示されます。 (f055&f056) Unicode しかし、FontAwesome5.14.5 に切り替えた後、Unicode は動作しなくなりました。

P粉517090748 2023-09-03 21:16:38 0  1  471

F12 を使用せずに CSS 背景画像のスライド効果を実現するにはどうすればよいですか?

現在CSSとHTMLを使ってWebサイトを作ろうとしているのですが、背景画像をスライドさせたり動かしたりすることができません。 VisualStudioCodeを使用しており、Googleでコードを実行しましたが動きませんが、F12を押してデバッグすると動きますか？ ！これは私のコードです: body{background-color:black;margin:0;padding:0;background-image:url("正しい URL があります。

P粉903969231 2023-08-14 19:47:48 0  1  660

JavaScript - 以下の 2 つの図の切り替え効果に示すように、QQ のような左スライド メニュー ナビゲーションを Vue に実装する方法

(www.sf.gg) は、中国を代表する開発者テクノロジー コミュニティです。私たちは、プログラミング愛好家に純粋で高品質な技術交流プラットフォームを提供し、開発者と一緒に学び、コミュニケーションし、成長し、開発者の時代を作りたいと考えています。

滿天的星座 2017-06-29 10:09:57 0  1  907