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

Use semantic tags to write your HTML compatible with IE6,7,8

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

Use semantic tags to write your HTML compatible with IE6,7,8

Installation tutorial of MySQL 5.7 green version under windows2008 64-bit system

Use CSS to set the width of INPUT in TD

How to open external network access rights for mysql

MySQL 8.0 can now handle JSON

Details of the underlying data structure of MySQL indexes

Introduction to version management tool Rational ClearCase

Implementing WeChat tap animation effect based on CSS3 animation attribute

MySQL database connection exception summary (worth collecting)

The difference between KEY, PRIMARY KEY, UNIQUE KEY, and INDEX in MySQL

Recommend

VUE+Canvas implements the game of God of Wealth receiving ingots

Swiper+echarts realizes the left and right scrolling effect of multiple dashboards

Summary of five commands to check swap space in Linux

Vue implements top left and right sliding navigation

Solution to MySQL service 1067 error: modify the mysql executable file path

Detailed explanation of three solutions to the website footer sinking effect

Steps to run ASP.NET Core in Docker container

Detailed explanation of Docker Swarm service orchestration commands

Implementing long shadow of text in less in CSS3

Detailed explanation of vue3 cache page keep-alive and unified routing processing

In-depth understanding of javascript prototype and prototype chain

Alibaba Cloud ECS Server Getting Started Process (Must-Read Tutorial for Newbies)

How to quickly build ELK based on Docker

The linkage method between menu and tab of vue+iview

Detailed explanation of CSS3 media query responsive layout bootstrap framework principle practice (recommended)