今日は、スライドを使用する原理に似た、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 仮想ユーザー
目次1. 短絡や条件文の代わりにデフォルトのパラメータを使用する2. 複数の条件の処理3. スイッチ...
序文フッター領域を下部に固定します。ページの高さや幅に関係なく、モバイル メニューと同様に、フッター...
1. 要素の幅/高さ/パディング/マージンのパーセンテージ基準要素の幅/高さ/パディング/マージンの...
@Font-face 基本紹介: @font-face は、Web ページにカスタム フォントを表示...
結合の種類1. 内部結合: 結合関係を持つ 2 つのテーブル内のフィールドは、結合関係を満たすレコー...
目次v-model 入力で双方向バインディングデータを使用するコンポーネント内の v-model他の...
JavaScript スクリプトは HTML 内のどこにでも埋め込むことができますが、いつ呼び出され...
目次1. プロセス制御2. シーケンシャルプロセス制御3. 分岐フロー制御if文1. 支店構造2. ...
レンダリング 骨組みを定義し、HTMLとCSSを記述するHTML部分 <テンプレート> ...
目次序文1. Axiosの紹介2. HTTPインターセプターの設計と実装2.1 インターセプターの紹...
もちろん、CSS はフレームワークを必要とするほど高度ではないと考えて、反対の意見を持つ人もたくさん...
データベースのパフォーマンス最適化には、一般的にクラスタリングが採用されています。Oracle クラ...
フロートの定義要素を通常のドキュメント フローから外し、要素を左または右に近づけます。親要素の端...
目次1. 概要2. デジタル列挙2.1 逆マッピング3. 文字列の列挙4. const列挙5. まと...
ビジネスシナリオ: 異なるデータベース内のテーブルをクエリするたとえば、関連付けられるテーブルは、マ...