网站右侧悬浮在线客服组件，基于 jQuery 实现，支持点击收起/展开，带动画滑动效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

代码介绍

  • 这是网站右侧悬浮在线客服组件，基于 jQuery 实现，支持点击收起/展开，带动画滑动效果

一、HTML结构

  • #rightArrow：侧边触发按钮，点击控制客服面板开合

    • a标签：仅作点击载体，href="javascript:;" 阻止默认跳转

  • #floatDivBoxs：客服主浮窗盒子

    • a链接协议 tencent://message/，用来唤起电脑QQ聊天窗口，uin后面是QQ号码

    • .floatDtt：浮窗顶部标题【在线客服】

    • .floatShadow：内容包裹层

    • .floatDqq：QQ客服列表

    • .floatDtxt：客服电话小标题

    • .floatDtel：展示400客服号码

    • .floatImg：微信二维码图片 + 提示文字【扫码有好礼】

二、JS变量跟函数

  • 依赖：jquery-1.10.2.min.js，低版本jQuery

  • flag 变量：状态标记，1=展开状态，0=收起状态

  • $('#rightArrow').click()：按钮点击事件

    • 客服盒子 right:0，滑回页面内

    • 按钮回到 right:170px，背景图复原 0 0（打开图标）

    • flag 设置为1

    • 客服盒子 right: -175px，向右侧移出屏幕

    • 按钮滑动到 right:-5px，同时切换背景图位置 background-position:-50px 0（变成关闭图标）

    • flag 设置为0

    • flag==1（展开）：执行收起动画

    • flag==0（收起）：执行展开动画

    • animate({},300)：动画时长300毫秒，滑动过渡更柔和

三、使用注意点

  • 图片路径：images/qq.png、images/wx.jpg，图片放不对会显示空白

  • QQ协议 tencent://message/ 只在电脑端、本地安装QQ客户端才生效；手机上无效

  • 宽度固定：浮窗总宽度175px，CSS要配套设置 overflow:hidden，不然收起时内容露出来