【CSS+js】模仿王者荣耀官网循环精灵图导航_css做王者皮肤一样的动图-CSDN博客

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、需求描述
二、使用步骤
总结

前言

CSS基础学习练习到写导航栏模仿一下王者官网的精灵图导航

一、需求描述

导航使用精灵图作为背景
使用循环的方式实现这里用到了 js 循环设置 background-image、background-position

二、使用步骤

1. html 结构

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>王者荣耀精灵图导航 -js 实现</title>
    <style>
        nav {
            background-image: url('./images/nav_bj.webp');
            background-repeat: no-repeat;
        }
        
        nav a {
            text-decoration: none;
            display: inline-block;
            width: 195px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            color: #fff;
            background-image: url('./images/bav-bj.png');
            background-repeat: no-repeat;
        }
    </style>
</head>

<body>
    <nav id="nav">
        <a href="#" onClick="SendClick('tabs1')" id="tabs1"> </a>
        <a href="#" onClick="SendClick('tabs2')" id="tabs2"> </a>
        <a href="#" onClick="SendClick('tabs3')" id="tabs3"> </a>
        <a href="#" onClick="SendClick('tabs4')" id="tabs4"> </a>
        <a href="#" onClick="SendClick('tabs5')" id="tabs5"> </a>
    </nav>
</body>
</html>

2.CSS

代码如下（示例）：

 	    nav {
            background-image: url('./images/nav_bj.webp');
            background-repeat: no-repeat;
        }
        
        nav a {
            text-decoration: none;
            display: inline-block;
            width: 195px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            color: #fff;
            background-image: url('./images/bav-bj.png');
            background-repeat: no-repeat;
        }

3. javascript

代码如下（示例）：

  function SendClick(element) {

        //1.清除其他的已点击演示
        init();

        //2.修改点击的a链接的背景精灵图位置
        var num = element.replace('tabs', '');
        var y = (num - 1) * 195;
        var move_y = 0 - y + 'px';
        document.getElementById(element).style.backgroundPositionX = move_y;
        document.getElementById(element).style.backgroundPositionY = '0px';

    }
    //初始化导航
    function init() {
        var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {

            (function(num) {
                var index = 195 * i;
                as[i].style.backgroundPositionX = '-' + index + 'px';
                as[i].style.backgroundPositionY = '-120px';
            })(i)
        }
    }
    init()