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:

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

Detailed explanation of native Javascript inheritance methods and their advantages and disadvantages

The effect of zooming in on a Taobao store is similar to the principle of using a slideshow.

Detailed explanation of native Javascript inheritance methods and their advantages and disadvantages

HTTP Status Codes

How to use Nginx to carry rtmp live server

How CSS affects the white screen time during initial loading

How to implement two-way binding function in vue.js with pure JS

Detailed explanation of using pt-heartbeat to monitor MySQL replication delay

Common problems in implementing the progress bar function of vue Nprogress

Detailed explanation of MySQL database triggers

CentOS7.5 installation tutorial of MySQL

HTML exceeds the text line interception implementation principle and code

Recommend

How to use Portainer to build a visual interface for Docker

How to deploy hbase using docker

Example code of how CSS matches multiple classes

Pure HTML+CSS to achieve typing effect

JavaScript super detailed implementation of web page carousel

Solution to the horizontal scroll bar in iframe under IE6

Color hexadecimal color code table display and hexadecimal value comparison display for easy search

Example code for implementing verification code login in SMS API in Node

MySQL permissions and database design case study

Application of dynamic image loading technology and use case of jquery.lazyload plug-in

15 Vim quick reference tables to help you increase your efficiency by N times

Configure VIM as a C++ development editor in Ubuntu

Good website copywriting and good user experience

Example code for achieving hollowing effect with pure CSS

About dynamically adding routes based on user permissions in Vue