Taobao ストアでズームインする効果は、スライドショーを使用する原理に似ています。
|
今日は、スライドを使用する原理に似た、Taobao のフロントエンドのマウス ズーム効果に慣れました。ここでこのコードを分析します。 コードをコピー コードは次のとおりです。<div class="sub all_t1" スタイル="幅:160px;高さ:107px;背景:url(upload/2022/web/T2khnoXihaXXXXXXXX_!!845309971.png_160x160.jpg)繰り返しなし;"> <div データウィジェット設定="{'トリガー':'.all_t1','align':{'ノード':'.all_t1','オフセット':[0,-160],'ポイント':['bc','tc']}}" データウィジェットタイプ="ポップアップ" クラス="J_TWidget 非表示"> <div style="width:310px;height:207px;background:url(upload/2022/web/T2khnoXihaXXXXXXXX_!!845309971.png_310x310.jpg) 繰り返しなし"></div> </div> </div> class="J_TWidget hidden" は、画像属性を制御するための Taobao 組み込み js コードのキーです。div のノードを取得し、ノードを制御するために使用されます。スタイルについては、長さ、幅、背景画像などスタイルの定義です。 <div data-widget-config="{'trigger':'.all_t1','align':{'node':'.all_t1','offset':[0,-160],'points':['bc','tc']}}" data-widget-type="Popup" class="J_TWidget hidden"> これは間違いなく特殊効果のプロパティの定義です。 node: 'custom', // 参照要素。ポップアップは参照要素を基準として配置されます。連絡先を書くのと同じように、 クラスおよびIDセレクタの記述をサポート points: [tr,tl], // ['tl', 'tr'] は、ポップアップの tl が参照ノードの tr と揃っていることを意味します。 tl と tr の具体的な意味と値については、以下のスクリーンショットを参照してください。 t(上)、c(中央)、b(下)、l(左)、r(右) offset: [0,0] // 有効な値は[n, m]、ポイントが整列された後のオフセット値、 一般的には微調整に使用できます。n と m は 2 つのポイントの位置合わせを表します。 x座標とy座標のオフセット |
<<: CSS で平均レイアウトを実現するために負のマージンを使用する例
>>: MySql 認証に基づく vsftpd 仮想ユーザー
推薦する
JavaScript コードベースをよりクリーンにする 5 つの方法
目次1. 短絡や条件文の代わりにデフォルトのパラメータを使用する2. 複数の条件の処理3. スイッチ...
CSS3 は下部に固定されたフッターを実装します (ページの高さに関係なく常に下部にあります)
序文フッター領域を下部に固定します。ページの高さや幅に関係なく、モバイル メニューと同様に、フッター...
純粋なCSSで立体的な画像配置効果を実現するサンプルコード
1. 要素の幅/高さ/パディング/マージンのパーセンテージ基準要素の幅/高さ/パディング/マージンの...
@Font-face の基本的な使い方と、すべてのブラウザと互換性を持たせる方法
@Font-face 基本紹介: @font-face は、Web ページにカスタム フォントを表示...
Mysql での結合操作
結合の種類1. 内部結合: 結合関係を持つ 2 つのテーブル内のフィールドは、結合関係を満たすレコー...
vue3 コンポーネントでの v-model の使用と詳細な説明
目次v-model 入力で双方向バインディングデータを使用するコンポーネント内の v-model他の...
JavaScript スクリプトが実行されるタイミングの詳細な説明
JavaScript スクリプトは HTML 内のどこにでも埋め込むことができますが、いつ呼び出され...
JavaScript フロー制御 (分岐)
目次1. プロセス制御2. シーケンシャルプロセス制御3. 分岐フロー制御if文1. 支店構造2. ...
Vueはスライダードラッグ検証機能の全プロセスを実現します
レンダリング 骨組みを定義し、HTMLとCSSを記述するHTML部分 <テンプレート> ...
77.9K の GitHub リポジトリを持つ Axios プロジェクト: 学ぶ価値のあることは何でしょうか?
目次序文1. Axiosの紹介2. HTTPインターセプターの設計と実装2.1 インターセプターの紹...
960 グリッドシステムの基本原理と使用法
もちろん、CSS はフレームワークを必要とするほど高度ではないと考えて、反対の意見を持つ人もたくさん...
mysql+mycat、負荷分散、マスタースレーブレプリケーション、読み取り/書き込み分離操作に基づく安定した高可用性クラスタを構築します。
データベースのパフォーマンス最適化には、一般的にクラスタリングが採用されています。Oracle クラ...
CSSフローティングとフローティング解除について
フロートの定義要素を通常のドキュメント フローから外し、要素を左または右に近づけます。親要素の端...
TypeScript 列挙型
目次1. 概要2. デジタル列挙2.1 逆マッピング3. 文字列の列挙4. const列挙5. まと...
MySQL におけるデータベース間関連クエリメソッド
ビジネスシナリオ: 異なるデータベース内のテーブルをクエリするたとえば、関連付けられるテーブルは、マ...