Taobao ストアでズームインする効果は、スライドショーを使用する原理に似ています。

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 仮想ユーザー

推薦する

MySQL ロック関連知識のまとめ

MySQL のロックロックは、並行環境におけるリソースの競合を解決する手段です。その中でも、楽観的並...

Vue3.0 でページング コンポーネントを手動でカプセル化する方法

この記事では、vue3.0の手動カプセル化ページングコンポーネントの具体的なコードを参考までに紹介し...

Node.js でメモリ効率の高いアプリケーションを作成する方法

目次序文問題: 大きなファイルのコピーNodeJS のストリームとバッファバッファストリーム解決策 ...

Linux システムでのルート ディレクトリ拡張の概要

1. Linuxディスクの状態を確認する df -lh lsblkコマンドは、使用可能なすべてのブロ...

Vue2.0+ElementUI+PageHelperで実装されたテーブルページング機能

序文最近、いくつかのフロントエンド プロジェクトに取り組んでおり、ページにいくつかのテーブルを表示す...

Tomcat を IDEA にダウンロード、インストール、デプロイするチュートリアル (IDEA の 2 つのホット デプロイ設定方法付き)

目次Tomcat ダウンロードチュートリアルTomcat インストールチュートリアルTomcat の...

MySQL インデックス使用状況監視スキル (収集する価値あり!)

概要リレーショナル データベースでは、インデックスは、データベース テーブル内の 1 つ以上の列の値...

CocosCreatorでリストを作成する方法

CocosCreator バージョン: 2.3.4 Cocos には List コンポーネントがない...

HTML で 2 列レイアウトを実装する方法の例 (左側は固定幅、右側は適応幅)

HTMLは2列レイアウトを実装し、左側は固定幅、右側は適応幅です。実装1: <スタイル>...

nginx を介して方向プロキシを実装するプロセスの図

この記事は主に、nginx を介して方向プロキシを実装するプロセスを紹介します。この記事のサンプル ...

HTMLウェブページのMETAタグのコンテンツを書く際のポイント

META タグは、HTML 言語のヘッダー領域にある補助タグです。作成者、日時、Web ページの説明...

ウェブサイト製品設計の参考となるいくつかの原則

以下の分析は製品設計原則に関するものですが、そのほとんどはウェブサイト製品に基づいているため、ユーザ...

Vue命令の動作原理と実装方法

Vue の紹介現在のビッグフロントエンドの時代は、混乱と衝突の時代です。世界は多くの派閥に分かれてお...

インデックスとテーブルリターンをカバーするMySQLの使い方

インデックスの2つの主要なカテゴリ使用されるストレージエンジン: MySQL 5.7 InnoDBク...

Linux で docker-compose を使用したソフトウェア構成の詳細な説明

序文この記事では、docker-compose の構成をいくつか紹介します。これらを参考にして、独自...