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 仮想ユーザー
推薦する
HTML の 2 つのタブ ナビゲーション間の競合の解決方法
まず問題の説明から始めましょう:同じページで、1 つのタブに float:left が必要で、もう ...
CSS は Apple のスムーズなスイッチ ボタン効果を模倣します
目次1. コード分析2. ソースコードソースコード1. コード分析1.1 HTMLコード分析 <...
クリックイメージ反転効果を実現するJavaScript
最近、顔コレクションに関するプロジェクトに取り組んでいましたが、フロントエンドモジュールを書いている...
CentOS7 に ElasticSearch 6.4.1 をインストールするための詳細なチュートリアル
1. ElasticSearch 6.4.1 インストール パッケージを次の場所からダウンロードしま...
Sparkの紹介とHadoopとの比較
目次1. SparkとHadoopの比較1.1 Haoopの欠点1.2 Hadoop MR に対する...
MySQL グラフィカル管理ツール Navicat のインストール手順
目次序文1. 全員にインストールパッケージを用意する2. Navicatをインストールし、Navic...
Linux/CentOS サーバー セキュリティ構成の一般ガイド
Linux はオープン システムです。インターネット上には、既成のプログラムやツールが多数存在します...
nginx を使用してブルーグリーン デプロイメントをシミュレートする方法
この記事では、ブルーグリーン デプロイメントと、nginx を使用してブルーグリーン デプロイメント...
CSS レイアウト チュートリアル: 垂直方向の中央揃えを実現する方法
序文最近、フロントエンドの知識をまとめており、いくつかのインタビューにも参加しました。インタビュー中...
MySQLリモート接続を有効にする方法
セキュリティ上の理由から、MySql-Server はローカル マシン (localhost、127...
Mysql データベースのマスタースレーブ同期構成
目次Mysql マスタースレーブ同期構成1. 2つのmysqlをインストールする2. MySQL設定...
antd pro に基づく SMS 認証コード ログイン機能 (プロセス分析)
目次まとめ全体的なプロセスフロントエンドページコード検証コードとログイン サービスをリクエストする ...
CentOS7 インストール GUI インターフェースとリモート接続の実装
ブラウザ (Web ドライバー) ベースの Selenium テクノロジを使用してデータをクロールす...
MySQL InnoDBとMyISAMの違いを簡単に理解する
序文MySQL は、myisam、innodb、memory、archive、example など、...
js 正規表現の先読みと後読み、および非キャプチャグループ化
目次先読みと後読みをキャプチャグループと組み合わせる捕獲グループと非捕獲グループ前を向いて、後ろを振...