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 の構成をいくつか紹介します。これらを参考にして、独自...