在线客服侧边浮动框js封装_前端封装一个客服js-CSDN博客

本文链接：https://blog.csdn.net/Asa_Jim/article/details/96483387

最近看到个在线客服的页面感觉效果不错，所以研究了下把样式图片抽出来用js封装下以后待用。

效果如下

浮动框内点击链接支持直接跳转目标页面，显示微信二维码,显示QQ二维码,QQ临时会话唤起,显示练习方式等,封装后支持左侧或右侧浮动。

目录说明

index.html页面

<!DOCTYPE html>
<html>
<head>
<title>侧边框</title>
<script src="FloatingBox.js"></script>
</head>
<body style="height:1000px;width:1000px">
</body>
</html>

FloatingBox.js

var FloatingBox = {};
//设置地址
FloatingBox.SetBaseUrl = function () {
    if (window.location.protocol.toLowerCase() == "file:") {
        return;
    }
    if (window.location.port.length > 0) {
        return;
    }
    else {
        var webName = window.location.pathname.substring(1).split("/")[0];
        FloatingBox.Setting.BaseUrl = "/" + webName;
    }
    if (FloatingBox.Setting.BaseUrl.length > 0) {
        FloatingBox.Setting.BaseUrl += "/";
    }
};

FloatingBox.setCss = function () {
    var textArr = [];
    textArr.push('            #floatingBox {');
    textArr.push('                width: 112px;');
    textArr.push('                position: fixed;');
    textArr.push('                ' + FloatingBox.Setting.ShowType + ': -80px;');
    textArr.push('                top: 50%;');
    textArr.push('                margin-top: -283px;');
    textArr.push('                z-index: 999;');
    textArr.push('            }');
    textArr.push('');
    textArr.push('                #floatingBox .kfleft {');
    textArr.push('                    width: 32px;');
    textArr.push('                    height: 168px;');
    textArr.push('                    background: url(' + FloatingBox.Setting.BaseUrl + 'images/floatingBox/kefu.png) no-repeat;');
    textArr.push('                    cursor: pointer;');
    textArr.push('                    float: left;');
    textArr.push('                }');
    textArr.push('');
    textArr.push('                #floatingBox ul {');
    textArr.push('                    width: 80px;');
    textArr.push('                    height: 566px;');
    textArr.push('                    background: url(' + FloatingBox.Setting.BaseUrl + 'images/floatingBox/kefu1.png) no-repeat;');
    textArr.push('                    float: left;');
    textArr.push('                list-style: none;');
    textArr.push('                margin: 0px;');
    textArr.push('                padding: 0px');
    textArr.push('                }');
    textArr.push('');
    textArr.push('                    #floatingBox ul li{');
    textArr.push('                    line-height: 22px;');
    textArr.push('                    list-style: none');
    textArr.push('                     }');
    textArr.push('                    #floatingBox ul li a {');
    textArr.push('                        width: 80px;');
    textArr.push('                        height: 80px;');
    textArr.push('                        display: block;');
    textArr.push('                        margin-bottom: 1px;');
    textArr.push('                        background: #EEE;');
    textArr.push('                        -moz-opacity: 0.4;');
    textArr.push('                        filter: alpha(opacity=40);');
    textArr.push('                        opacity: 0.4;');
    textArr.push('                    }');
    textArr.push('');
    textArr.push('                        #floatingBox ul li a:hover {');
    textArr.push('                            -moz-opacity: 0;');
    textArr.push('                            filter: alpha(opacity=0);');
    textArr.push('                            opacity: 0;');
    textArr.push('                            transition: all 0.5s linear;');
    textArr.push('                            -webkit-transition: all 0.5s linear;');
    textArr.push('                            -moz-transition: all 0.5s linear;');
    textArr.push('                            -o-transition: all 0.5s linear;');
    textArr.push('                        }');
    textArr.push('            /*ie6*/');
    textArr.push('            *html {');
    textArr.push('                overflow: hidden;');
    textArr.push('            }');
    textArr.push('');
    textArr.push('            *html #floatingBox {');
    textArr.push('                position: absolute;');
    textArr.push('                right: expression(eval(document.documentElement.scrollLeft))-80;');
    textArr.push('                top: expression(eval(document.documentElement.scrollTop))-283;');
    textArr.push('            }');
    textArr.push('  #floatingBox .boxLeft{');
    textArr.push('        width: 0px;');
    textArr.push('        height: 40px;');
    textArr.push('        background-color: #FFFFFF;');
    textArr.push('        margin-left: 40px;');
    textArr.push('        overflow: hidden;');
    textArr.push('        color: white;');
    textArr.push('        text-align: center;');
    textArr.push('        line-height: 40px;');
    textArr.push('    }');
    var cssStr = textArr.join('\n');
    var style = document.createElement("STYLE");
    style.innerHTML = cssStr;
    document.getElementsByTagName("HEAD")[0].appendChild(style);
};
//浮动框配置
FloatingBox.Setting = {
    BaseUrl: "",  //基本地址
    Items: [
          { "type": "link", "title": "打开微信", "href": "https://wx.qq.com/" },
          { "type": "image", "title": "关注微博", "image": "images/floatingBox/weibo.png" },
          { "type": "text", "title": "学习交流群", "image": "images/floatingBox/weibo.png", "render": function (item, arr) { FloatingBox.QQGroup(item, arr); } },
          { "type": "image", "title": "购买", "image": "images/floatingBox/weibo.png" },
          { "type": "text", "title": "在线咨询", "render": function (item, arr) { FloatingBox.QQList(item, arr); } },
          { "type": "image", "title": "财务咨询", "image": "images/floatingBox/weibo.png" },
          { "type": "image", "title": "联系方式", "image": "images/floatingBox/weibo.png" },
    ],
    ShowType: "right"  // 浮动导航显示方向默认右侧 左侧为left
};
//初始化
FloatingBox.init = function () {
    var div = document.createElement("DIV");
    div.id = "floatingBox";
    var textArr = [];
    if (FloatingBox.Setting.ShowType == "right") {
        textArr.push('        <div class="kfleft" title=""></div>');
    }
    textArr.push('        <ul>');
    if (FloatingBox.Setting != null && FloatingBox.Setting.Items.length > 0) {
        for (var i = 0; i < FloatingBox.Setting.Items.length; i++) {
            var item = FloatingBox.Setting.Items[i];
            if (item.type == "link")
            {
                textArr.push('<li><a rel="nofollow"   href="' + item.href + '" title="' + item.title + '" target="_blank"></a></li>');  //只打开新窗体
            }
            if (item.type == "image") {
                textArr.push('<li><div class="boxLeft" style="height:200px;width:200px;display:none;position:absolute"><img height="200" width="200" src="' + FloatingBox.Setting.BaseUrl + item.image + '"></div><a rel="nofollow"   href="javascript:void(0);" title="' + item.title + '" target="_blank" onclick="FloatingBox.showPopPanel(this)"></a></li>');
            }
            if (item.type == "text") {
                if (item.render != null) {
                    item.render(item, textArr);
                }
            }
        }
    }
    textArr.push('        </ul>');
    if (FloatingBox.Setting.ShowType == "left") {
        textArr.push('        <div class="kfleft" title=""></div>');
    }
    div.innerHTML = textArr.join('\n');
    document.body.appendChild(div);
    var panel = null;
    if (FloatingBox.Setting.ShowType == "right") {
        panel = div.firstElementChild;
    }
    else {
        panel = div.lastElementChild;
    }
    panel.onclick = function () {
        if (FloatingBox.Setting.ShowType == "right") {
            var right = parseInt(div.style.right);
            if (right == 0) {
                div.style.right = "-80px";
            }
            else {
                div.style.right = "0px";
            }
        }
        else {
            var left = parseInt(div.style.left);
            if (left == 0) {
                div.style.left = "-80px";
            }
            else {
                div.style.left = "0px";
            }
        }
        FloatingBox.closeBigImage();
    };
};
//显示大图
FloatingBox.showPopPanel = function (element) {
    var floatingBox = document.getElementById("floatingBox");
    if (floatingBox == null) {
        console.log("floatingBox is miss");
        return;
    }
    if (element == null || element.previousSibling == null) {
        console.log("boxImage is miss");
        return;
    }
    element = element.previousSibling;
    this.closeBigImage(element);
    if (element.style.display == "") {
        element.style.display = "none";
    }
    else {
        element.style.display = "";
        if (FloatingBox.Setting.ShowType == "right") {
            element.style.right = element.parentElement.clientWidth + "px";
        }
        else {
            element.style.left = element.nextElementSibling.clientWidth-38 + "px";
        }
    }
};
//关闭所有左侧弹出
FloatingBox.closeBigImage = function (element) {
    var imageArr = document.getElementById("floatingBox").getElementsByClassName("boxLeft");
    if (imageArr != null && imageArr.length > 0) {
        for (var i = 0; i < imageArr.length; i++) {
            if (imageArr[i] == element) {
                continue;
            }
            imageArr[i].style.display = "none";
        }
    }
}
//构建QQ交流群信息
FloatingBox.QQGroup = function (item, textArr) {
    textArr.push('<li><div class="boxLeft" style="height:200px;width:200px;display:none;position:absolute"><span style="color:black;font-size: large">QQ群:123123</span></div><a rel="nofollow"   href="javascript:void(0);" title="' + item.title + '" target="_blank" onclick="FloatingBox.showPopPanel(this)"></a></li>');
};
//QQ多人客服列表
FloatingBox.QQList = function (item, textArr) {
    var qqList = [{ QQ: 1812813640, title: "张老师" },
    { QQ: 1812813640, title: "李老师" },
    { QQ: 1812813640, title: "王老师" }
    ];
    var str = "";
    for (var i = 0; i < qqList.length; i++) {
        var data = qqList[i];
        str += '<a  style="opacity:1;width:100px;height:50px" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=' + data.QQ + '&site=qq&menu=yes"><img src="' + FloatingBox.Setting.BaseUrl + 'Images/floatingBox/qq.png" align="absmiddle">&nbsp;&nbsp;' + data.title + '</a>';
    }
    textArr.push('<li><div class="boxLeft" style="height:200px;width:100px;display:none;position:absolute">' + str + ' </div><a rel="nofollow"   href="javascript:void(0);" title="' + item.title + '" target="_blank" onclick="FloatingBox.showPopPanel(this)"></a></li>');
};

//浮动框加载
(function () {
    FloatingBox.SetBaseUrl(); //根据部署条件设置图片的基地址
    FloatingBox.setCss(); //加载所需css
    window.addEventListener("load", function () {
        FloatingBox.init();   //生成浮动框
        document.getElementById("floatingBox").firstElementChild.click(); //默认展开
    });
})();

使用时候目标页面只需要增加<script src="FloatingBox.js"></script> 更改 FloatingBox.Setting 中的配置数据设置正确图片路径即可。

注QQ会话唤起需要设置QQ的安全特性，否则需要加好友才能对话，有需要的可以直接打开例子中的QQ会话咨询

代码下载

链接: https://pan.baidu.com/s/13bl2UKu4RigjaTWUYtpGmw 提取码: tqk4 复制这段内容后打开百度网盘手机App，操作更方便哦