在线客服框的制作

最新推荐文章于 2024-02-04 14:21:26 发布

红噔噔

最新推荐文章于 2024-02-04 14:21:26 发布

阅读量293

点赞数 1

文章标签： javascript css html5

本文链接：https://blog.csdn.net/qq_44294202/article/details/111749625

版权

在线客户框的制作

项目场景：

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

制作思路：

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

<!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">

红噔噔

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
在线客服框的制作

在线客户框的制作项目场景：在线客服制作：通过在版心的右边缘设置一个悬浮框，通过过渡动画来展示制作思路：第一步：先定位整体框架，做好布局第二步：做精灵图控制每个鼠标移动的背景图效果第三步：做细节展示动画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt
复制链接

扫一扫