The effect of zooming in on a Taobao store is similar to the principle of using a slideshow.
|
Today I got familiar with the mouse zooming effect on the front end of Taobao, which is similar to the principle of using slides. I will analyze this code here. Copy code The code is as follows:<div class="sub all_t1" style="width:160px;height:107px;background:url(upload/2022/web/T2khnoXihaXXXXXXXX_!!845309971.png_160x160.jpg) no-repeat;"> <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"> <div style="width:310px;height:207px;background:url(upload/2022/web/T2khnoXihaXXXXXXXX_!!845309971.png_310x310.jpg) no-repeat"></div> </div> </div> class="J_TWidget hidden" is the key to Taobao's built-in js code to control image attributes. It is used to obtain the node of the div and control the node. As for style, it is the definition of the style, including length, width, background image <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"> This is undoubtedly the definition of the properties of the special effects. node: 'custom', // reference element. The popup is positioned relative to the reference element. Just like writing contacts, Supports writing of class and id selectors points: [tr,tl], // ['tl', 'tr'] means that the popup's tl is aligned with the reference node's tr. For the specific meaning and value of tl and tr, please see the screenshot below. t(top),c(center),b(bottom),l(left),r(right) offset: [0,0] // Valid value is [n, m], after points are aligned, offset value, Generally, it can be used for fine-tuning. n and m represent the alignment of two points. The offset between the x and y coordinates |
<<: Example of using negative margin to achieve average layout in CSS
>>: vsftpd virtual user based on MySql authentication
Recommend
Nexus uses API to operate
Nexus provides RestApi, but some APIs still need ...
Open the app on the h5 side in vue (determine whether it is Android or Apple)
1. Development environment vue+vant 2. Computer s...
RHCE installs Apache and accesses IP with a browser
1. at is configured to write "This is a at t...
Detailed explanation of axios encapsulation and API interface management in React project
Table of contents Preface Install Introduction Sw...
Win32 MySQL 5.7.27 installation and configuration method graphic tutorial
The installation tutorial of MySQL 5.7.27 is reco...
A brief discussion on how to write beautiful conditional expressions in JS
Table of contents Multiple conditional statements...
Sample code for implementing dark mode with CSS variables
Recently, WeChat was forced by Apple to develop a...
Example of implementing login effect with vue ElementUI's from form
Table of contents 1. Build basic styles through E...
Detailed steps to upgrade mysql8.0.11 to mysql8.0.17 under win2008
Upgrade background: In order to solve the vulnera...
Vue implements a simple calculator
This article example shares the specific code of ...
Analysis of the principles of docker containers
Table of contents 01 What is the essence of a con...
Correct way to load fonts in Vue.js
Table of contents Declare fonts with font-face co...
How to install golang under linux
Go is an open source programming language that ma...
Detailed explanation of Docker common commands Study03
Table of contents 1. Help Command 2. Mirror comma...
Detailed explanation of Vue form event data binding
<body> <div id="root"> <...