Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to achieve JavaScript imitating Xiaomi Mall official website page, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

First, the production of the home page

The main effects of the home page are as follows:

Download APP, the production of shopping cart, the production of two navigation bars, the production of rotation map.

When we have roughly completed the layout, we need to start using JavaScript to deal with the details.

1. Download the production of APP

What kind of effect is needed here? when the mouse moves to download app, the download QR code appears and disappears. This is the same as many of what we have done before, but is he special? He's special. In particular, there is an animation effect when it appears and disappears. So why on earth is Xiaomi's original so silky? When I was wondering whether to use the display attribute or animation, I suddenly came up with a very clever attribute! We can change the height of the box to match the transition effect and overflow:hidden properties to make the effect fill up directly.

But there will be a hole in it. The little triangle above, we can use the border to do it, and then locate it on the outside of the box. If we put the small triangle inside the QR code box (.download), the top value we locate is negative, that is, it will exceed the box, and once it exceeds it, it will be hidden, so we can only put the small triangle on the outside, and then locate it on the top of the box, and then cooperate with the display attribute to complete the effect. The description may not be very intuitive, on the code!

Html Code:

Download APP

APP of Xiaomi Mall

Css Code: (less version)

Li {float: left; padding:8px; padding-right: 0; a {display: block; height: 15px; text-align: center; padding-right: 8px; border-right:1px solid # 423c37 Font-size: 8px; color: # b0b0b0; &: hover {color: # fff;} # download {position: relative; width: 68px I {display: none; position: absolute; top: 20px; left: 25px; width:0; height:0; border-color: transparent transparent white transparent / / border-color:transparent # ccc transparent transparent; border-style:solid; border-width:8px; z-index: 9;} .download {position: absolute; top: 16px Left:-28px; margin-top: 20px; width: 130px; height: 0; overflow: hidden; box-shadow: 0px 1px 5px # aaa; / / border:1px solid # ccc; background-color: # fff; transition: height .3s Z-index: 999; a {font-size: 14px; color: # 000; border: 0; &: hover {color: # 000 } img {display: block; width: 100px; height: 100px; margin: 15px;}

Js Code:

Var APP = this.document.getElementById ('download') var download = this.document.querySelector (' .download'); APP.addEventListener ('mouseenter', function () {download.style.height = 160 +' px'; APP.children [1] .style.display = 'block';}); APP.addEventListener (' mouseleave', function () {download.style.height = 0; APP.children [1] .style.display = 'none';})

Note: this code is not complete and may cause it to fail to run, for reference only

Shopping carts are made in the same way.

two。 The making of navigation bar

The main point of this box is that when we touch a certain navigation bar above, the corresponding commodity bar will appear below. At the same time, we can touch any element in the navigation bar, and when the mouse moves over the navigation bar, it will make the commodity bar disappear.

See this effect I first thought of this is not the same as the tab bar switch, the mouse click event into a mouse move in and out of the event on the line? But I really think too little, when the mouse moves out of the navigation bar and wants to go to the merchandise bar, the merchandise bar will disappear directly, and the effect is that it can only be seen but not touched. So we can only write the merchandise bar into the corresponding navigation bar, like this.

Corresponding figure:

The next thing becomes simple, change the style, change the content, and add the rest of the js code.

3. The making of the rowing map

We can use the swiper plug-in to write the aspect of the webcast diagram directly.

URL: Swiper Chinese net-broadcast slide js plug-in, front-end development of H5 page

In the effect demonstration, choose a set of templates you like and fix them, which is much easier than writing your own code. Since there is such a plug-in that can be developed, of course we should use it!

Second, the creation of login and registration pages

When I did this page, I fixed it on the left and squeezed the margin value on the right, but when I checked and accepted it later, I found that the layout was not simple enough. We can just use the percentage layout of the picture on the left.

1. Box layout

The core content of this page is the middle box, because the registration login page is written on the same page, so their parts should look like the following figure:

Place the two boxes side by side, and when we click the login / registration above, the box below will animate the switch effect.

two。 Check box style change

One of the ways to change the style of the check box on the Internet shocked me! That is to write another box and cover it with the original check box.

I saw that this method was full of question marks, but don't say it was really effective. The code is as follows:

# checkbox {width: 20px; height: 20px; display: inline-block; color: # ff6900; margin: 0; font-size: 14px } input [type=checkbox] {width: 20px; height: 20px; margin-top: 2px; position: relative;} input [type=checkbox]:: after {position: absolute Top: 0; color: # 000; width: 20px; height: 20px; display: inline-block; visibility: visible; padding-left: 0px; text-align: center Content:''; / / border-radius: 3px;} input [type=checkbox]: checked::after {content: "✓"; color: # fff; font-size: 10px; line-height: 20px Background-color: rgb (255,105,0);} III. Page jump

In fact, the two pages have been built here, and the remaining thing is to string the two pages together. At this point we are going to use the location property in the BOM object. If you forget, you can check the relevant usage in the previous blog posts.

When we click the login button, we jump to the login section, and click registration to jump to the registration section, but the problem is that login registration is a page, so we have to pass parameters to determine which button we clicked.

Before clicking:

After clicking:

And

The login in? is the parameter we passed in the past. We change the registration login from the a link to the submit button (form). When we click, we get the value of the current button and save it as a variable. when we jump, we pass the jump address and parameters. Get the parameter values that have just been passed on the registration page, and operate according to the parameters. Look at the code!

Html Code:

Js of the index page:

Var indexDL = this.document.getElementById ('indexDL'); var indexZC = this.document.getElementById (' indexZC'); var temp1 = null; var temp2 = null; indexDL.addEventListener ('click', function () {temp1 = indexDL.name; var newurl =' login.html'; / / _ window.location.href = newurl; / / _ window.location.assign (newurl)) Window.event.returnValue = false _ window.location.href = 'login.html' +'?'+ temp1; / / console.log (temp1);}); indexZC.addEventListener ('click', function () {temp2 = indexZC.name; window.event.returnValue = false; _ window.location.href =' login.html' +'?'+ temp2;})

The function is to pass parameters.

Js of the login page:

Var temp3 = _ window.location.search.substr (1); if (temp3 = 'register') {ZC.click ();}

The function is to cut the string and determine whether it is the parameter we want.

Thank you for reading this article carefully. I hope the article "how to imitate the official website page of Xiaomi Mall" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.