在線客服側邊浮動框js封裝

原創 皮皮虾大侠 2019-07-31 01:00

    最近看到個在線客服的頁面感覺效果不錯，所以研究了下把樣式圖片抽出來用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" οnclick="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" οnclick="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" οnclick="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，操作更方便哦

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

利用java反射機制實現List>轉化爲List

BEGIN;         最近在用hibernate做項目，由於後續的業務功能比較多，然後框架原設計沒有使用到一對多、一對一等特性，（艹TA妹）沒辦法，只能用原生sql語句獲得需要的結果集。但是返回過來的是一個List<Map<Str

倚楼听风雨_ 2020-06-30 09:20:50

js通過pos請求下載excel文檔

通過get請求下載excel文件有個限制是請求參數長度受限，改爲post方式獲取excel文件流到頁面實現。 方式一:JQ實現 function downLoadFile(options) { $.ajax({

皮皮虾大侠 2020-06-23 13:31:59

SQL Server TEXT類型字段字符串替換示例處理腳本

 /*--text字段的替換處理     --*/     --創建數據測試環境   --create   table   #tb(aa   text)declare @s_str varchar(8000),@d_str varchar

Single 2020-06-16 10:46:18

[留着備用]ASP.NET動態菜單生成通用方法

        #region ASP.NET動態菜單生成通用方法        private void InitTree0(Menu TV,DataSet ds) //根結點加載函數        {            TV.It

Single 2020-06-16 10:46:18

C#網絡Socket的數據發送與接收處理(利用異步)的模板(模式)

using System;using System.Collections.Generic;using System.Text;using Syste

Single 2020-06-16 10:46:18

"跬步"腳本語言 介紹

Single 2020-02-22 22:31:37

SQL Server 2000實現一則按類似VB VAL函數功能排序的案例

Single 2020-02-22 22:31:37

用反射實現將數據自動填充到對象中，學習orm的半個功能

皮皮虾大侠 2020-02-22 13:06:51

數據結構課設--棧（順序棧，鏈式棧）

fmx-inspiration 2020-02-21 13:36:40

下個winfrom treeview顯示目錄樹例子要50C幣下了還用不上自己寫個只要5C幣

皮皮虾大侠 2019-08-22 22:59:47

百度ueditor 多個實例時圖片縮放框錯位bug修復

皮皮虾大侠 2019-03-22 23:59:08

if語句應用輸入月份輸出對應季節舉例

Java菜鸟集中营 2018-09-04 20:20:50

switch語句應用輸入月份輸出對應季節舉例

Java菜鸟集中营 2018-09-04 20:20:50

自學完成的第一個Java版猜拳遊戲

Java菜鸟集中营 2018-09-04 20:20:49

原創 javascript 封裝jsonp 請求

皮皮虾大侠 2018-09-04 10:53:44