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

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

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

CSS のヒント: 水平線と中央揃えのテキストを作成する

テキストを含む水平方向の仕切りを作成しようとしています。例: ----------------------------------これが私のタイトルです -------- - ------------------------CSS でこの効果を実現する方法はありますか?明らかに、すべての「-」ダッシュを使用する必要はありません。

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

css3 - グラフィックとテキストに対応したスタイル

PC デスクトップでこのページをレスポンシブにする: 1 つの方法は画像を直接レスポンシブにする方法ですが、唯一の欠点はテキストがぼやけ、効果が完璧ではないことです。 , このように、テキストのサイズを適応させる必要があり、テキストの位置関係を適切に行うのはさらに困難です...

習慣沉默 2017-05-16 13:20:57 0  3  754

PHP は画像のみから方向 exif を削除します (imagick は使用しません)

アップロードされた画像をローカルで一括してサイズ変更し、サムネイルを作成するスクリプトを作成しました。問題は、一部の画像が垂直方向に配置されているが、サイズ変更後に水平方向に回転する場合です。これは画像の exif の向きが原因です。 PHP 経由で画像から方向 exif を削除する簡単な方法はありますか? Imagick ができることは知っていますが、インストールできない/したくないのです。それなしで解決策はありますか？現在、このような画像を画像エディタで開き、exif情報を保持せずに再保存することで、この問題を解決しています。その後、私がいたとき、

P粉141925181 2024-03-27 09:27:01 0  1  500

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

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

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

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

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

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

javascript - 要素が現在表示領域内にあるかどうかを確認する方法

タイトルにあるように、水平方向に自由にスライドできる水平方向に入力された li の行ができました。特定の li が現在の表示領域内にあると、そのスタイルの一部が変更されます。そのような効果はどのように記述すればよいでしょうか?皆さんが答えを手伝ってくれることを願っています。 。 。 。 。 。 。

天蓬老师 2017-07-05 11:07:20 0  5  1166

グリッド テンプレート領域を使用してグリッドを表示できないのはなぜですか?

グリッドテンプレート領域を介して要素の配置を実現しようとしていますが、機能しません。グリッドシステムを使用してブロックを垂直方向と水平方向に配置しようとしています。左側に画像を使用し、反対側にテキストを使用します。このコードが機能しないのはなぜですか? .news__wrapper{display:grid;grid-template-areas:"aac""bbc";}.news__item{display:flex;align-items:center;just

P粉541796322 2023-09-09 16:28:13 0  1  758

Android 上の React-Native でステータス更新が機能しない

スワイプ可能な水平ギャラリーに画像のペアを含むコードがいくつかあります。両方の画像の上部をクリックすると、画像がオフに切り替わるはずです。そのため、私が行ったのは、isImage2Active を状態に設定し、ソースを切り替えるだけです。 iOS では完全にスムーズに動作しますが、Android ではほとんどまったく動作しません。頻繁にクリックすると変更される可能性がありますが、それは明らかに私が望む動作ではありません。したがって、説明したように、スライド可能な水平ギャラリーconstImageである画像コンポーネントがあります

P粉541551230 2024-04-06 16:54:10 0  1  670

div ブロック内でテキストを (水平方向と垂直方向に) 中央揃えにするにはどうすればよいですか?

Ihaveadivsettodisplay:block(90pxheightandwidth),andIhavesometextinside.テキストを垂直方向と水平方向に中央揃えにする必要があります。 text-align:centerを試しましたが、vertical-aligningの部分ができませんでしたので、vertical-align:middleを試しましたが、twoはできませんでした

P粉969253139 2023-08-24 16:58:26 0  2  591

カスタムドロップダウン矢印

選択タグのドロップダウン矢印を 4 つの要素で構成されるカスタム矢印に変更することはできますか。次のようにしたいのですが: 左側に 3 本の水平線、右側に下向きの矢印。1 つの要素 (水平線) でこの効果を実現しました。select-wrapper::before{content:"";position:absolute ;トップ:50%;表示:ブロック;幅:9px;高さ:2px;背景

P粉986937457 2023-08-17 17:52:04 0  1  546

画像とテキストを横に並べるにはどうすればよいですか? HTML CSS フレキシブル ボックス

テキストが画像の下に配置されるようになりました。テキストを画像の横に縦方向に配置したいと考えています。 flex-direction:column と justify-content:center を追加しようとしましたが、うまくいきませんでした。 floatも試しましたが、それもうまくいきませんでした。文字と画像を並べて配置する方法がわかりません。どうすれば横に並べることができますか?私のコードにエラーはありますか? .whoweare{パディング:80px0px50px;背景色:#000000;}.w

P粉350036783 2023-08-26 00:23:03 0  1  704

android - 2つのレイアウトの端に画像を設定する方法

図に示すように、このような効果を設定する方法は、画像が 2 つのレイアウトの端にあり、このアクティビティの下にビデオを再生するアクティビティがあり、フレーム レイアウトを使用して透明度を設定しています。透明。

淡淡烟草味 2017-05-16 13:34:07 0  2  927

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

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

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

css - float 要素が落ちる問題を解決する方法

この効果を実現したいのですが、現在のコードは次のようなものです {code...} {code...} を変更した後、それを解決する方法を知りたいです。幅を縮小するには、div の背景画像が表示されます。写真を比例的に拡大縮小する方法はありますか?

怪我咯 2017-05-16 13:36:42 0  7  1267

JavaScript - Chrome はクリック イベントをトリガーして、その隣のテキストを選択します

図に示すように、選択効果を作成する必要がある場合は、ボックスの toggleclass をクリックしてスタイルを変更します。マウスを頻繁にクリックすると、その隣のテキストが選択されることがわかります。言語の説明は次のとおりです。明確ではありません。画像を見てみましょう。背景を変更するには、ボックスの一部をクリックするだけですが、すばやくクリックすると、その隣の背景も選択されます。

怪我咯 2017-05-18 10:50:08 0  2  992

JavaScript はサムネイルから全幅の画像ページへのスムーズな移行を実装します

http://manifesto.clapat.com/ ホーム ページ上の項目をクリックすると、サムネイルから全画面画像に遷移し、その画像がその項目のページのタイトルになります。これらのトランジション効果はどのように作成されるのでしょうか。また、ReactRouter の代わりに内部ルーティングを使用してそれらを実装する最善の方法は何でしょうか。ただし、誰かが ReactRouter で動作させることができるのであれば、それを移植することもできます。利用可能なチュートリアルがいくつかありますが、別のプロジェクト ページに移動するのではなく、全画面モーダル コンポーネントと同様に、すべて同じペ...

P粉536532781 2023-09-15 22:09:37 0  1  994

ホバー時のチルト効果のバグ

中にテキストが入った傾き効果のあるボタンがあり、ボタンにマウスを置くとボタンの横に 2 つの線が表示されます。ボタンが表示されるまでボタンの上にカーソルを置くコードがありますが、これは非常にランダムな副作用です。これは Chrome の問題だと思いますが、よくわかりません。問題の画像は次のとおりです: https://prnt.sc/hafHhDOHntco.button-skew{position:relative;width:fit-content;padding:6px40px;borde

P粉520545753 2024-03-29 13:34:50 0  1  396

Nuxt 3 で <html> タグと <body> タグに Tailwind CSS クラスを追加するにはどうすればよいですか?

Nuxt3 アプリケーション用に tailwind を使用してカスタム 404 エラー ページを作成しようとしています。ページをすべてのデバイスの画面いっぱいに表示し、404 エラー ページを垂直方向と水平方向の中央に配置したいのですが、垂直方向の中央に配置できません。ラッパーで h-screen または h-full を使用する場合でも、常にページの先頭に表示されます。 TailwindUI コンポーネントの例では、「この例ではテンプレートの更新が必要です」と表示されています。<htmlclass="h-full"&g

P粉476883986 2023-09-04 19:20:05 0  1  700

scrollIntoView() がコンテナをページの先頭までスクロールしないようにします

スクロールスナップを使用するが、現在表示されているスライドを制御するためのナビゲーションボタンも備えた、単純な「主にCSS」画像カルーセルを構築しようとしています。私が見つけた唯一の解決策は、ターゲット要素でscrollIntoView()を使用することです。これは私が望むことを実行しますが、ターゲット要素を常にページの先頭までスクロールします。ターゲットのカルーセル スライドとコンテナーを元の位置に維持し、スライドを水平方向にスクロールして表示したいだけです。 AdamArgyle の例を見ていたところ、彼はこれを実行し、コンテナは元の位置に留まりました、わかりません

P粉690200856 2024-03-26 20:25:28 0  1  509