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

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

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

javascript - スワイプの左右切り替え矢印をクリックすると、スワイプ ソース コードの slideNext 関数内で現在の vue インスタンスにアクセスします。

現在の要件は、vue を使用してタブ バーとスワイプを備えたカルーセル コンポーネントを作成することです。カルーセル画像の左右のヘッドをクリックすると、スワイプの slideNext 関数で現在のページのページ番号を取得し、そのページ番号を vue インスタンスに渡してカルーセル画像の同期効果を実現したいと考えています。そしてタブバー！しかし、今ではさまざまな...

漂亮男人 2017-06-26 10:58:16 0  1  773

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

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

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

JavaScript - vue2.0 トランジションを使用して、マウスを上に移動し、QR コードを画面の外側からスライドさせ、QR コードを残して画面の外側にスライドさせる効果を実現する方法。

vue2.0 トランジションを使用して、マウスを上に移動し、QR コードを画面の外側からスライドさせ、QR コードを画面の外にスライドさせたままにする効果を実現する方法。以下は私が書いたコードですが、私が書いたのは次のとおりです: マウスを上に動かします、ボックスはスライドしていますが、マウスは離れていませんが、ボックスは消えています。

PHP中文网 2017-05-19 10:30:36 0  2  875

javascript - js制御要素のスタイルに関する疑問

{コード...} 上記のコードに示すように、slider_box は 1 秒ごとに 20% 左 (1 画面) にスライドしますが、問題が発生します。100% までスライドすると、左にスライドできなくなります。 (さらにスライドすると、画像は表示されません))、ただし、他のプラグインで見た効果は、slider_box のスライド変化が 1 秒ごとに -20% から 0 から -... になるということです。

伊谢尔伦 2017-07-05 10:39:55 0  4  842

javascript - 画像収集効果、プラス 3D 効果、なぜ収集後に線が発生するのですか?

div には多数のサブディビジョンがあり、サブディビジョンの背景画像を組み合わせて全体の画像を形成します。集合効果として、3D の Y 軸反転効果を追加しました。接合するときの真ん中? 論理的には集めた後になるはずです 結果がこれです コードを添付します pic{幅: 1000px;高さ: 655px;位置...

曾经蜡笔没有小新 2017-05-18 10:46:23 0  1  579

object-c - tableview またはscrollView に関する iOS のスライディング問題

タイトルがこのような場合、実現したい効果はスライドダウンの過程です。たとえば、下の図はテーブルビューで作成されています。ここでスライドしても動きません。実現したい効果は次のとおりです。青い色が画面の半分に達していない場合（その位置はほぼOK）、自動的に最初の行、つまり赤い行のみに戻ります...

PHP中文网 2017-06-20 10:06:07 0  1  883

JavaScript - 携帯電話の画面をスライドして、特定の要素の上部からの距離を取得するにはどうすればよいですか?同時に、この値を他の関数から参照することはできますか?

タイトルの通り、携帯電話の画面をスライドさせたいのですが、要素が上から一定値（例えば200px）の位置で画面上のポップアップボタンをクリックし、その位置を指定します。ポップアップレイヤーは上から200pxになります。 {コード...} 欲しい この効果が得られ、距離の値は取得できますが、show関数では...

PHPz 2017-05-18 11:02:18 0  2  621

正確なマウス座標を取得できない問題: ページのサイズを変更するときに HTML5 キャンバスを使用する

このピクセル効果をフロントエンドの専門家に作成してもらいたいと考えています。全画面キャンバスでピクセル効果全体を実現することはできますが、 constcanvas=getElementById('canvas');canvas.height=window.innerHeight;//全画面の高さをキャンバスに設定します Canvas.width=window.innerWidth ;//キャンバスを全画面幅に設定すると、マウスの座標を取得しやすくなります constmouse={x:unknown,y:u

P粉752290033 2023-09-12 12:20:33 0  1  761

折りたたみ可能な要素を Flexbox レイアウトに挿入する方法

画像が折り返されたフレックスボックス レイアウトがあり、画像がクリックされたときに情報を表示したいと考えています。情報は、「列」を移動せずに、画像を含む行とそのすぐ下の行の間に表示される必要があります。これは私が望むタイプの効果です: http://olmenta.altervista.org (本をクリックしたとき)。私がやったことは次のとおりです: https://jsfiddle.net/fabhpnw9/3/varcoll=document.getElementsByClassName("re

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

CSS を使用してブロックの端をフェザリングする方法を学びます

ボックスの端にぼかし効果を持たせるように CSS を変更するにはどうすればよいですか?ボックスの背景に曇りガラスの効果を持たせ、周囲の鋭いエッジの代わりに徐々に背景に溶け込むぼかし効果を持たせたいのですが、現在の CSS を変更する方法がわかりません。ご協力をよろしくお願いいたします。 .wrap{位置:相対;幅:100%;高さ:100vh;背景画像:url('https://images.unsplash.com/p

P粉785522400 2023-08-16 18:38:07 0  1  745

JavaScript - モバイル Web サイトのナビゲーション バーの水平方向のスライド減速効果を実現する方法

主要な Web サイトのモバイル版のナビゲーション バーは、一般的に水平方向にスライドできます。携帯電話の画面をタッチしてスライドさせた後、減速するスライド効果があります。この機能は非常に気に入っています。インターネットでたくさん検索した結果、見つけたものはすべてありましたjsのタッチイベントの紹介でしたが詳しい方法が見つからなかったのでマスターに原理と具体的な説明をお願いしたいです...

给我你的怀抱 2017-06-28 09:27:42 0  1  935

JavaScript - SVG初心者、SVGに画像を挿入したい

コードは上記の通りです。SVGに画像を挿入してアニメーションさせたいのですが、効果がありません。説明してください...

代言 2017-06-24 09:44:02 0  1  924

javascript - dom要素でPDFをプレビューできるプラグインを誰かが推奨できますか?

画像の効果と同様に、現在 objectPDF.js という PDF プラグインを使用していますが、これを使用すると、PDF プレビュー プラグインの背後にある DOM 要素が消えてしまいます。

ringa_lee 2017-05-19 10:09:10 0  2  608

JavaScript - キャンバス上で鉛筆の線画効果を実現する方法

最近描いている線画は全てlinetoで描いているのですが、全て実線で描いているので、クリエイティブの効果という観点からすると、【鉛筆】を描いたような効果が欲しいんです～マスターの皆さん、描き方を教えてください。 。

習慣沉默 2017-05-24 11:37:40 0  1  1073

JavaScript - 素敵なカルーセル画像を見たので、実装方法を教えてください。

ページ https://www.pingxx.com のカルーセル画像がとてもクールだと思いましたが、両面でフェードアウト効果を実現するにはどうすればよいですか?

某草草 2017-05-18 10:52:10 0  2  541

背景や透明文字が切れてしまう

CSS を使用して、以下に示すように背景から透明なテキストを切り取る効果を作成する方法はありますか?画像がテキストに置き換わるため、貴重な SEO をすべて失うのは残念です。最初に影を考えましたが、何も思いつきませんでした...画像は Web サイトの背景で、絶対位置の <img> タグです

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

JavaScript - 携帯電話の画面のスライドとスライド画面の上部からの距離を監視するにはどうすればよいですか?

携帯電話の画面のスライドを監視し、上からのスクロール距離を計算するにはどうすればよいですか? {コード...} このように書いたものは常に0ですか?監視スクロールは効果がありません。神に尋ねてください

黄舟 2017-05-19 10:11:07 0  4  679

html - CSS ナビゲーション バーがぼやけ、ナビゲーション バーが固定され、ページがスライドすると下のページがぼやけます。これを実現するにはどうすればよいですか?

インターネットで長時間検索した結果、以下のページに動的に影響を与えてぼやける解決策が見つかりませんでした。これはステーション b のブラー エフェクトです。静的です。原理は 2 つの同一の画像を使用し、一方の一部をぼかし、もう一方とマージすることです。私のアイデアは、AE と同様の調整レイヤーにガウスぼかしを追加して、下のレイヤーに実際の効果を与えることです...

大家讲道理 2017-05-24 11:36:02 0  2  1125

クリックしたときにテキストが新しい要素 (区切り線など) に変わるようにするにはどうすればよいですか?

ページ上の特定のテキストをクリックすると区切り文字/新しい要素に変わる方法を見つけようとしています。どう説明したらいいのかわかりませんが、画像の下にタイトルがあると想像してください。タイトルをクリックすると、上の画像がテキスト ボックス/別の画像/スクロール可能なセパレーターのようになります。ここでは、右側の頭蓋骨の絵文字をクリックすると、左側のボックスに新しい div/画像が表示されるというページの効果を実現しようとしています。ソースコードを見て、この効果を実現するために彼女が何をしているのかを確認していますが、まだわかりません。 w3schoolsonを使用しようとしています

P粉872101673 2024-04-04 11:21:03 0  1  3853