JS realizes the effect of Baidu News navigation bar

This article shares the specific code of JS to achieve the effect of Baidu News Navigation Bar for your reference. The specific content is as follows

I have been learning Web front-end recently and used js to simply implement the effect of Baidu News navigation bar. When the mouse moves over an option, a red background block will slide over the current option. When you click on an option, the fixed red background block will move to the current option, meaning that the current option is selected. Without further ado, the code is as follows

Body

<div class="box">
        <!--Two red background blocks-->
        <!--Background block that moves with the mouse-->
        <div id="move"></div>
        <!--The background block fixed somewhere after the mouse clicks-->
        <div id="fixed"></div>
        <a href="#">Home</a>
        <a href="#">Domestic</a>
        <a href="#">International</a>
        Military
        <a href="#">Finance</a>
        <a href="#">Entertainment</a>
        <a href="#">Sports</a>
        <a href="#">Internet</a>
        <a href="#">Technology</a>
        <a href="#">Games</a>
        <a href="#">Woman</a>
        <a href="#">Car</a>
        <a href="#">Property</a>
</div>

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";//Initial position of sliding background block //Bind all a tags to move in, move out, and click events for (let i = 0; i < aList.length; i++) {
                aList[i].onmouseover = function () {
                    // When the mouse moves into a certain 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 label a, the sliding background block returns to the initial position move.style.left = left;
                }
                aList[i].onclick = function () {
                    // After a certain a tag is clicked, the fixed background block moves 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 position of label a left = aList[i].offsetLeft + "px";
                }
            }
        }

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: