How to realize the effect of Baidu News Navigation Bar with JS
This article mainly explains "how to use JS to achieve Baidu news navigation bar effect", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to use JS to achieve Baidu news navigation bar effect"!
The details are as follows
Recently, I am learning the front end of Web. I simply realized the effect of Baidu news navigation bar with js. When the mouse moves over an option, a red background block slides over the current option. When an option is clicked, the fixed red background block position is moved to the current option, which means that the current option is selected. Needless to say, the code is as follows
Body part
Home page, domestic, international, military, financial, entertainment, sports, Internet, science and technology games, women, cars, real estate
Css part
* {margin: 0; padding: 0;} .box {top:100px; width: 790px; height: 30px; font-size: 0; position: relative; margin: 0 auto; background-color: # 01204f } a {display: inline-block; position: relative; width: 60px; height: 30px; line-height: 30px; color: white; font-size: 16px; text-decoration: none; text-align: center; transition: all 0.6s } # move {position: absolute; background-color: red; top: 0px; left: 0px; width: 60px; height: 30px; transition: all 0.6s;} # fixed {position: absolute; background-color: red; top: 0px Left: 0px; width: 60px; height: 30px;}
Js part
_ window.onload = function () {let move = document.getElementById ("move"); / / sliding background block let fixed = document.getElementById ("fixed"); / / background block fixed somewhere let aList = document.getElementsByTagName ("a"); / / a tag list let left = move.offsetLeft + "px" / / slide the initial position of the background block / / to make all a tag bindings move in, out, and click the event for (let I = 0; I < aList.length) Move.style.left +) {aList [I] .onMouseover = function () {/ / when the mouse moves into an a tag, the sliding background block slides to the position of the current a tag move.style.left = aList [I] .offsetLeft + "px" } aList [I] .onmouseout = function () {/ / when the mouse moves out of the a tag, slide the background block to return to the initial position move.style.left = left } aList [I] .onclick = function () {/ / after an a tag is clicked, the fixed background block is moved to the position of the current a tag fixed.style.left = aList [I] .offsetLeft + "px" / / Update the initial position of the sliding background block to the current a tag position left = aList [I] .offsetLeft + "px" } Thank you for your reading. The above is the content of "how to use JS to achieve the effect of Baidu news navigation bar". After the study of this article, I believe you have a deeper understanding of how to use JS to achieve the effect of Baidu news navigation bar, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
