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 仮想ユーザー
推薦する
Linux/Mac MySQL パスワードを忘れた場合の対処方法
Linux/Mac の MySQL パスワードを忘れた場合はどうすればいいですか?心配しないでくださ...
MySql クイック挿入数千万の大規模データの例
データ分析の分野では、データベースは私たちの強力な助けとなります。クエリ時間を受け入れるだけでなく、...
MySQL のインデックスの原理とクエリの最適化の詳細な説明
目次1. はじめに1. インデックスとは何ですか? 2. インデックスはなぜ必要なのでしょうか? 2...
Vueはドラッグアンドドロップまたはクリックで写真をアップロードする機能を実装しています
この記事では、ドラッグアンドドロップやクリックによる画像のアップロードを実現するためのVueの具体的...
MySQL パーティションテーブルのベストプラクティスガイド
序文：パーティショニングはテーブル設計パターンです。一般的に、テーブル パーティショニングとは、条件...
Docker-compose インストール db2 データベース操作
db2 データベースをホストマシンに直接インストールするのは面倒で、ユーザーや権限を巻き込むのも不便...
ミニプログラムはリストのカウントダウン機能を実装します
この記事の例では、ミニプログラムでリストカウントダウンを実装するための具体的なコードを参考までに共有...
VMware Workstation Pro が Win10 アップデートにより開けなくなる問題の解決方法
今夜の夕食後にノートパソコンの電源を入れたところ、問題が発生しました。通常、コンピューターがスリープ...
CSS3で作成した画像スクロール効果
成果を達成する実装コードhtml <base href="https://s3-us...
Vue はシェイク機能を実装します (ios13.3 以降と互換性があります)
最近、shake.jsを使用して、shakeに似た機能を作成しました。ただし、shake機能はios...
el-table カプセル化に基づくドラッグ可能な行と列、および選択列コンポーネントの実装
効果環境が必要ビュー要素UIドラッグアンドドロッププラグインSortable.js必要な構成プロパテ...
Iframe の内外のページで JS がどのように動作するかの概要
目次iframeの外側のiframeのコンテンツを取得する方法1方法2 iframe 内の ifra...
Vueは3段階のナビゲーション表示と非表示を実装します
この記事では、3階層ナビゲーションの表示と非表示を実現するためのVueの具体的なコードを例として紹介...
MySQL で最大接続数を設定するためのヒントのまとめ
方法1: コマンドラインの変更次の図に示すように、MySQL コンソールを開いて「set GLOBA...
MySQLはイベントを使用してスケジュールされたタスクを完了します
イベントでは、SQL コードを 1 回または一定の間隔で実行することを指定できます。通常、複雑な S...