Shang Silicon Valley Shang preferred project tutorial release

It is preferred to be a HTML、CSS、JavaScript Mall project of comprehensive application of Technology , It is suitable for beginners to lay a solid foundation , Accumulate project experience . The project has strong practicability , It is the combing and integration of front-end basic knowledge , At the same time, it provides a practical training ground for more mainstream technologies in the future .

 

The project technology stack contains ： Definition HTML Page structure 、CSS Attribute definition of style ,Less Rules for creating and using mixers in 、 Nested Syntax 、 Parent reference, etc , as well as JavaScript The cycle in 、 Branch 、 function 、DOM、BOM、 Array 、 Object etc. .

 

The key and difficult points of the overall function of the project are ： Function realization of commodity magnifying glass , Rotation of thumbnails , Dynamic rendering of commodity parameter data , And the selection result display and the effect of commodity price changes after clicking , Creation and flexible call of public function tab , The layout and effect of the fixed right sidebar of the website . The business scenario is close to reality , Technology application follows the trend , Develop in full accordance with market demand .

Tutorial directory

01. Project brief introduction

02. Log in to register layout setup

03. List layout construction

04.logo And the search box

05. Product classification navigation layout

06. Path navigation layout

07. Dynamic rendering of path navigation data

08. The left magnifying glass layout is built

09. Magnifying glass mouse move in and out effect

10. Magnifying glass mouse movement to achieve the drag effect of mask elements

11. Boundary control of mask element movement

12. The magnifying glass moves to achieve the effect of equal scale movement of large image elements

13. Magnifying glass thumbnail layout construction effect

14. Dynamic rendering of magnifying glass thumbnail data

15. Click the thumbnail to realize the effect of changing the small picture and the large picture

16. Principle analysis of picture rotation effect of thumbnail clicking left and right arrows

17. Calculate the distance of each image movement and ul Distance traveled

18. The layout and construction detailed in the upper part of the commodity on the right

19. The upper part of the right commodity details data dynamic rendering

20. The parameter layout of the lower part of the right commodity is built

21. The parameter data of the lower part of the right commodity is dynamically rendered

22. Click the text color exclusive effect of the first line of product parameters

23. Use the closure function to solve the variable problem in the event in the loop

24. Realize the layout construction of the selection results

25. Click commodity parameters to dynamically add corresponding results

26. Click the delete button to delete the corresponding parameter data

27. Package price change function

28. Layout and construction of shopping cart and purchase price

29. The overall structure layout of the middle left tab is built

30. The specific content layout of the middle left tab is built

31. Choose the matching overall structural layout on the right side of the middle

32. Select the package price linkage effect with the check box selected in the matching

33. The middle right tab layout is built

34. Encapsulate a public tab function and call

35. The upper part of the right navigation bar is built

36. The middle layout of the right navigation bar is built

37. Click on the right navigation bar to switch state .