在线客服侧边浮动框js封装

最新推荐文章于 2024-02-01 11:15:00 发布
最新推荐文章于 2024-02-01 11:15:00 发布
阅读量703 收藏 2
点赞数
分类专栏： 原创代码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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，操作更方便哦

凌晨4点5杀老大爷
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
侧边框.rar
07-19
这里所说的"js封装在线客服侧边框"意味着开发者已经编写了一段JavaScript代码，该代码能够生成一个可定制的、显示在页面边缘的客服对话框，并且可以方便地整合到任何网页项目中。 “原创代码”表明这段JavaScript...
jQuery侧边悬浮栏在线客服代码
06-24
2. **客服状态显示**：显示客服是否在线、忙碌或离线，这需要后端服务支持并返回相应状态。 3. **表单提交**：用户可以输入问题，点击发送后，使用Ajax提交到服务器，避免页面刷新。 4. **样式设计**：蓝色风格的...
jQuery美橙互联侧边栏在线客服代码.zip
06-07
jQuery美橙互联侧边栏在线客服代码.zip
html右侧客服代码,非常好看的jQuery网站右侧固定在线客服代码
weixin_30841011的博客
06-04 1050
js代码$(document).ready(function(){/* ----- 侧边悬浮 ---- */$(document).on("mouseenter", ".suspension .a", function(){var _this = $(this);var s = $(".suspension");var isService = _this.hasClass("a-service")...
JS特效第121弹：jQuery蓝色网页右侧栏悬浮在线客服代码
最新发布
weixin_38343072的博客
02-01 1252
经典的JS特效动画效果，效果实现的全部代码已提供，可供学习借鉴
小程序添加在线客服悬浮窗代码前端（附录效果图）
2301_79071194的博客
07-09 545
image mode='aspectFill' src='图标路径' class='ymimage'></image>
网页右侧在线客服html,漂浮在网页右侧的QQ在线客服代码？ 1、怎么样修改以下代码，让其变为最靠右边2、如何插入到网页当中...
weixin_42189611的博客
05-31 248
满意答案wsS1282013.01.15采纳率：53%等级：2已帮助：17406人"帮你运行了，木有出现java script error Description的问题，有可能是你本地环境的问题，至于出现大片空白是由于你的表格标签乱了，木有对应！帮你调一下，代码：QQ在线客服FUNCTION CloseQQ(){divStayTopleft.style.display="none";ret...
纯js侧边浮动按钮模块支持自定义.zip
04-14
而“纯js侧边浮动按钮模块支持自定义”是一个专门为网站设计的JavaScript组件，它允许开发者在页面侧边添加一个可浮动的按钮，这个按钮能够展开为一排或扇形分布的多功能集合，提供了自定义颜色和布局效果，增强了...
jQuery 实现侧边浮动导航菜单效果
10-25
主要介绍了jQuery 实现侧边浮动导航菜单效果,需要的朋友可以参考下
HTML侧边浮动/固定栏
09-10
在CSS中，浮动是一种布局机制，允许元素脱离其正常文档流，并向左或向右移动，直到其边缘碰到包含框或另一个浮动元素的边缘。这通常用于创建多列布局或使文本环绕图片。 HTML侧边栏的实现通常涉及以下步骤： 1. **...
js右侧悬浮在线客服代码
06-24
j s右侧悬浮在线客服代码是一款兼容PC端跟移动端的响应式在线客服插件。
js写的很特别的一款网页右侧悬浮QQ在线客服代码，带有五屏广告幻灯片功能，支持自动收缩隐藏客服面板
06-29
js写的很特别的一款网页右侧悬浮QQ在线客服代码，带有五屏广告幻灯片功能，支持自动收缩隐藏客服面板，兼容IE78910及主流浏览器.rar
js响应式网站右侧悬浮在线客服插件
06-10
js响应式网站右侧悬浮在线客服插件，本款在线客服代码可自适应PC电脑端跟手机移动端。
QQ在线客服JS代码，自适应漂浮在网页右侧(界面美观大方)
06-22
QQ在线客服JS代码，自适应漂浮在网页右侧(界面美观大方)!值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
float.js：在页面上浮动一些内容（心形，花朵，表情符号，文字...）
02-04
Floating.js 让一些元素无限地漂浮在您的页面上 用法 您可以通过npm install --save floating.js ，并在页面中对其进行浏览器化 您可以下载脚本并将其嵌入到页面中 /** * Float a number of things up on a page (hearts, flowers, :OK_hand: ...) * @param { string } [options.content=':OK_hand:'] * the character or string to float * @param { number } [options.number=1] * the
html 网页右侧客服悬浮框
weixin_43508199的博客
02-17 5163
代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网页右侧客服悬浮框</title> <script src="./styles/js/jquery.min.js"></script> <style> .my_kefu {position: fixed;width: aut
MyCnCart 专业版 - 客服侧边栏
mycncart的博客
01-26 362
该功能主要便于顾客在PC端访问时能够快速寻找相关的链接或信息。 该侧边栏模组包含如下功能： 1. QQ在线客服。点击时会打开QQ对话框进行在线联系。 2. 联系电话。鼠标移到电话图标时会显示联系电话。 3. 微信扫码关注公众号。点击微信图标会弹出微信公众号二维码图片，顾客点击后可以关注企业公众号，便于吸粉和后续通过微信接受信息和访问微信商城。 4. 分类。点击时弹出所有分类，便于顾客快速
js 实现手机端任意拖拽悬浮窗，在手机屏幕范围任意移动,始终居右显示
MisterMister的博客
08-02 1524
1.css: #demo{ border-radius: 1rem; position: fixed; height: 1rem; width: 1rem; right: 0; z-index: 999999; bottom: .35rem; text-align: center; font-size: 0; } 2.页面： 3.js代码： function initDialog(){ let ...
html5 左侧在线客服,在网页右侧漂浮的QQ在线客服代码,QQ在线状态代码（四种样式）...
weixin_35761503的博客
06-02 2788
本文分享的是一款漂浮在网页右侧的QQ在线客服代码：在网站上添加qq在线状态，方便用户直接点击qq进行在线咨询。在网页头部引入以下文件：想换个颜色样式，只需引入不同的CSS样式：如把QQ在线客服换成红色样式：JS代码：$(function(){$("body").Sonline({Position:"right",//left或rightTop:200,//顶部距离，默认200pxEffect:tr...
html侧边导航栏,浮动侧边导航栏的基本布局
06-01
HTML侧边导航栏的基本布局可以使用HTML和CSS来实现。以下是一个简单的HTML代码示例，其中包含一个侧边导航栏和主内容区域的布局： ```html <!DOCTYPE html> <html> <head> <title>侧边导航栏</title> <style> body { margin: 0; padding: 0; } #sidebar { width: 200px; height: 100%; position: fixed; top: 0; left: 0; background-color: #f1f1f1; overflow: auto; } #main { margin-left: 200px; padding: 20px; } </style> </head> <body> <div id="sidebar"> <ul> <li><a href="#">菜单项1</a></li> <li><a href="#">菜单项2</a></li> <li><a href="#">菜单项3</a></li> <li><a href="#">菜单项4</a></li> <li><a href="#">菜单项5</a></li> </ul> </div> <div id="main"> <h1>主内容区域</h1> <p>这里是主要内容，可以放置文章、图片等。</p> </div> </body> </html> ``` 在上面的代码中，`#sidebar`是侧边导航栏的容器，使用了`position: fixed`来固定在页面左侧，并使用了`overflow: auto`来处理导航栏高度超出屏幕时的滚动条。`#main`是主内容区域的容器，使用了`margin-left`来为侧边导航栏留出空间。 如果要实现浮动侧边导航栏，可以将`#sidebar`的`position`属性改为`relative`，并在`#main`中使用`float: left`来实现。具体实现方式可以根据实际需求进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

凌晨4点5杀老大爷

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值