Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

Project Description

Login registration layout construction

List layout construction

logo and search box

Product category navigation layout

Path navigation layout

Dynamic rendering of path navigation data

Magnifying glass layout construction on the left

Magnifying glass mouse move in and out effect

Move the magnifying glass mouse to realize the dragging effect of mask elements

Boundary control for mask element movement

Moving the magnifying glass achieves the effect of moving large picture elements in equal proportions

Magnifying glass thumbnail layout construction effect

Dynamic rendering of magnifying glass thumbnail data

Click on the thumbnail to change the image to a smaller or larger image.

Analysis on the principle of image carousel effect by clicking the left and right arrows on thumbnails

Calculate the distance of each picture movement and the distance of ul movement

The layout of the detailed introduction of the upper part of the product on the right

Detailed explanation of the upper part of the product on the right introduces dynamic rendering of data

Product parameter layout construction for the lower half of the product on the right

Dynamic rendering of product parameter data in the lower half of the product on the right

Click on the text color of the first row of product parameters for exclusive effects

Use closure functions to solve variable problems in events in loops

Implement layout construction of selection results

Click on the product parameters to dynamically add corresponding results.

Click the delete button to delete the corresponding parameter data

Package price change function

Shopping cart and purchase price layout construction

The overall structural layout of the middle left tab

Construction of the specific content layout of the middle left tab

Choose the overall structural layout to match on the right side of the middle

Select the package price linkage effect when the check box is selected in the collocation

Building the middle right tab layout

Encapsulate a public tab function and call

Construction of the work part of the right navigation bar

Construction of the middle layout of the right navigation bar

Implementation of switching status by clicking on the right navigation bar