在线客服框的制作

在线客户框的制作

项目场景:

在线客服制作:
通过在版心的右边缘设置一个悬浮框,通过过渡动画来展示


制作思路:

第一步:先定位整体框架,做好布局
第二步:做精灵图控制每个鼠标移动的背景图效果
第三步:做细节展示动画

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            width: 900px;
            height: 600px;
            background: #0c0;
            margin: 0 auto;
        }

        #kf {
            width: 50px;
            height: 200px;
            background: #f00;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: 450px;
        }

        #kf a {
            display: block;
            width: 50px;
            height: 50px;
            background: url(image/kefu.jpg) no-repeat;
            position: relative;
        }

        #kf a:nth-child(2) {
            background-position-y: -50px;
        }

        #kf a:nth-child(3) {
            background-position-y: -100px;
        }

        #kf a:nth-child(4) {
            background-position-y: -150px;
        }
        #kf a span{
            display: inline-block;
            width: 0px;       /*设置动画效果,鼠标移动时候显示宽度*/
            height: 50px;
            background: #007BF9;
            position: absolute;
            right:50px;       /*偏移父元素的宽度*/
            line-height: 50px;
            text-align: center;
            color: #fff;
            overflow: hidden;
            transition: all .4s;
         
        }
    </style>
</head>

<body> 
   
    需求:在版心的右边缘设置一个悬浮框,通过过渡动画来展示
    <div class="container"></div>
    <!--在线客服-->
    <p>第一步:先定位整体框架,做好布局
        <br>第二步:做精灵图控制位置
        <br>第三步:做细节展示动画</p>

    <div id="kf">
        <a href="#">
            <span>在线咨询</span>
        </a>
        <a href="#">
            <span>11111111111</span>
        </a>
        <a href="#">
            <span>联系我们</span>
        </a>
        <a href="#" id="to_top">
            <span>回到顶部</span>
        </a>
    </div>
    <script>
        //控制鼠标移动效果
        var tu = document.querySelectorAll('#kf a');
        tu.forEach((v) => {
            v.onmouseover = function () {
                v.style.backgroundPositionX = '-50px';  //鼠标移动时,背景图向左偏移
                v.children[0].style.width='150px';      //鼠标移动时候显示宽度

            }
            v.onmouseout = function () {
                v.style.backgroundPositionX = '0px';   //鼠标移动时,背景图不偏移
                v.children[0].style.width='0px';      //鼠标移动时候显示宽度为0
            }
        });

        //回到顶部操作:
        var  toTOP=document.querySelector('#to_top');
        toTOP.addEventListener('click',()=>{
            var y=window.scrollY;
            var timelong=setInterval( ()=>{
                y-=150;
                console.log(y);
                window.scrollTo(0,y);
                if(y<=0){
                    clearInterval(timelong);
                }
            },180)
        });
    </script>
</body>

</html>

 </font>


<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">




上一篇:下载文件


下一篇:攀枝花办攀枝花证KF