js原生 在线客服功能

在线客服功能
1、css样式

     /* 设置盒子以中心点向右移动超出版心 */
        
        #kefu {
            width: 50px;
            height: 200px;
            position: fixed;
            top: 50%;
            margin: -100px 0 0 610px;
            left: 50%;
        }
        /* 设置所有的a标签，导入背景图，背景图统一位置是左上角第一张 */
        
        #kefu a {
            display: block;
            width: 50px;
            height: 50px;
            background: url(kefu.jpg) no-repeat;
            position: relative;
        }
        /* 第一个a标签y轴不动（因为本身就在对应的位置），设置第二、三、四个y轴分别移动到对应的位置 */
        
        #kefu a:nth-child(2) {
            background-position: 0 -50px;
        }
        
        #kefu a:nth-child(3) {
            background-position: 0px -100px;
        }
        
        #kefu a:nth-child(4) {
            background-position: 0 -150px;
        }
        /* 统一把a标签x轴向左移动50px，这里为-50px */
        
        #kefu a:hover {
            background-position-x: -50px;
        }
        
        #kefu a span {
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #007BF9;
            color: #fff;
            position: absolute;
            left: 0px;
            display: none;
            /* 设置过度动画,宽度设置为0超出部分隐藏 */
            width: 0px;
            transition: all 1s;
            overflow: hidden;
            display: inline-block;
        }

2、html

    <div id="kefu">
        <a href="#">
            <span>在线咨询</span>
        </a>
        <a href="#">
            <span>13212341234</span>
        </a>
        <a href="#">
            <span>微信</span>
        </a>
        <a href="#">
            <span>返回顶部</span>
        </a>
    </div>

3、js

      // 获取到所有的a标签赋值给a
        var a = document.querySelectorAll('#kefu a');
        // 遍历a标签，得到每一个a
        a.forEach((v) => {
            // 鼠标移入的时候触发函数(onmouseover移入)
            v.onmouseover = function() {
                    // this代表每次循环出来的a值(v),v寻找下面的子节点(寻找children),下标为0,更改属性设置为显示
                    // this.children[0].style.display = 'block';
                    // 鼠标移动上去宽度设置成0,向左边支出,
                    v.children[0].style.width = '150px';
                    v.children[0].style.left = '-150px';
                }
                // onmouseout移出效果设置为隐藏
            v.onmouseout = function() {
                // this.children[0].style.display = 'none';
                // 隐藏这里就直接设置为0
                v.children[0].style.width = '0px';
                v.children[0].style.left = '0px';
            }
        });