简易在线浮动客服-网站右侧悬停浮动在线客服代码

news2024/12/23 23:07:31

本文将介绍如何制作一个简单的在线浮动客服,这是一个网站右侧悬浮窗的在线客服,并分享完整的代码实现。

CSS

    /* 基础样式重置 */
    body, html {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }

    /* 固定小部件位置 */
    .fixed-widget {
      position: fixed;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 50;
    }

    /* 小部件项目样式 */
    .widget-item {
      width: 48px;
      height: 48px;
      background-color: #f0f0f0;
      border-radius: 8px;
      cursor: pointer;
      margin-bottom: 6px;
      position: relative;
      transition: background-color 0.3s;
	  right: 8px;
    }

    .widget-item:hover {
      background-color: #e0e0e0;
    }

    /* 图标样式 */
    .widget-icon {
      color: #666;
      font-size: 24px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    /* 服务信息框样式 */
    .service-box {
      display: none;
      position: absolute;
      width: 180px;
      height: auto;
      background-color: #fff;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      padding: 8px;
      text-align: center;
      top: 0;
      right: 50px;
      border: 1px solid #e0e0e0;
    }

    .service-box p {
      margin: 0;
      font-size: 14px;
    }

    /* 微信二维码样式 */
    .wechat-qr {
      width: 100%;
      height: auto;
      margin-bottom: 4px;
    }

    /* 返回顶部按钮样式 */
    .scroll-top {
      display: block;
    }

    /* 媒体查询,小于768px时显示返回顶部按钮 */
    @media (max-width: 768px) {
      .scroll-top {
        display: block;
      }
    }

HTML

<div class="fixed-widget">
    <div class="flex flex-col space-y-2">
      <!-- 电话 -->
      <div class="widget-item" onmouseover="showService('phone-service')" onmouseout="hideService('phone-service')">
        <span class="widget-icon">📞</span>
        <div class="service-box" id="phone-service">
          <p>📞 +86 123-4567-8910</p>
        </div>
      </div>

      <!-- 邮箱 -->
      <div class="widget-item" onmouseover="showService('email-service')" onmouseout="hideService('email-service')">
        <span class="widget-icon">✉️</span>
        <div class="service-box" id="email-service">
          <p>✉️ 12345678@qq.com</p>
        </div>
      </div>

      <!-- 微信 -->
      <div class="widget-item" onmouseover="showService('wechat-service')" onmouseout="hideService('wechat-service')">
        <span class="widget-icon">📱</span>
        <div class="service-box" id="wechat-service">
          <img src="WeChat.jpg" alt="WeChat" class="wechat-qr">
        </div>
      </div>

      <!-- 返回顶部 -->
      <div class="widget-item scroll-top" onclick="scrollToTop()">
        <span class="widget-icon">🔝</span>
      </div>
    </div>
  </div>

Javascript

  <script>
    // 显示服务信息
    function showService(id) {
      document.getElementById(id).style.display = 'block';
    }

    // 隐藏服务信息
    function hideService(id) {
      document.getElementById(id).style.display = 'none';
    }

    // 滚动到页面顶部
    function scrollToTop() {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }
  </script>

效果图:

简易浮动客服

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1842368.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Day14—基于Langchain-chatchat搭建本地智能

一、基于Langchain-chatchat搭建本地智能 知识问答系统 1、项目介绍 基于 ChatGLM 等大语言模型与 Langchain 等应用框架实现&#xff0c;开一种利用 langchain 思想实现的基于本地知识库的问答应用&#xff0c;目标期望建立一套对中文场景与开源模型支持友好、可离线运行的知…

fastapi给文档页面docs/加锁

加锁后效果如下&#xff1a; 如图docs/页面打开默认是茶壶&#xff0c;需加上定制参数才能正常访问 &#xff1a; 具体实现如下&#xff1a; 1. 安装依赖包&#xff1a; pip install fastapi-cdn-host>0.5.2 || pip install --upgrade gitssh://gitgithub.com/waketzheng…

XGBoost算法详解

XGBoost算法详解 XGBoost&#xff08;Extreme Gradient Boosting&#xff09;是一种高效的梯度提升决策树&#xff08;GBDT&#xff09;实现&#xff0c;因其高性能和灵活性在机器学习竞赛中广泛使用。本文将详细介绍XGBoost算法的原理&#xff0c;并展示其在实际数据集上的应…

hbuilderx如何打包ios app,如何生成证书

hbuilderx可以打包ios app, 但是打包的时候&#xff0c;却需要两个证书文件&#xff0c;我们又如何生成这两个证书文件呢&#xff1f; 点击hbuilderx的官网链接&#xff0c;教程是需要使用mac电脑苹果开发者账号去创建这两个文件&#xff0c;可是问题来了&#xff0c;我们没有…

代码随想录算法训练营第六十五天 | 岛屿数量 深搜、岛屿数量 广搜、岛屿的最大面积

岛屿数量 深搜 题目链接&#xff1a;99. 岛屿数量 文字讲解&#xff1a;99. 岛屿数量 | 代码随想录 解题思路 本题已经说明&#xff0c;只有水平方向和竖直方向才能组成岛屿 本题思路&#xff0c;是遇到一个没有遍历过的节点陆地&#xff0c;计数器就加一&#xff0c;然后把…

【STC8A8K64D4开发板】第3-2讲:温湿度传感器DHT11

第3-2讲&#xff1a;温湿度传感器DHT11 学习目的了解DHT11数字温湿度传感器的基本原理及其数据格式。掌握STC8A8K64D4与DHT11单总线通信的程序设计&#xff0c;通信步骤&#xff0c;数据校验等。 硬件电路设计 湿敏元件简介 湿敏元件是最简单的湿度传感器。湿敏元件比较常见的…

基于GWO-CNN-LSTM数据时间序列预测(多输入单输出)-多维时间序列模型-MATLAB实现

基于GWO-CNN-LSTM数据时间序列预测(多输入单输出)-多维时间序列模型-MATLAB实现 基于灰狼优化&#xff08;Grey Wolf Optimizer, GWO&#xff09;、卷积神经网络&#xff08;Convolutional Neural Network, CNN&#xff09;和长短期记忆网络&#xff08;Long Short-Term Memor…

Socket编程之多进程模型

一、多进程模型概述 基于最初的阻塞网络 I/O &#xff0c;若服务器要为多个客户端提供支持&#xff0c;在较为传统的手段中&#xff0c;多进程模型是常用的选择&#xff0c;即为每个客户端都分配一个进程来处理其请求。 服务器的主进程主要负责对客户连接的监听&#xff0c;一旦…

【docker安装rabbitmq】

docker安装rabbitmq 1.查阅rabbitmq的Dokcer Hub官方说明 rabbitmq地址&#xff0c;因为我们需要使用的是带管理界面的rabbitmq服务。所以我们需要下载的rabbitmq:management镜像 docker pull rabbitmq:management2.启动rabbitmq 2.1.快速启动 One of the important thing…

Linux:配置本地yum源仓库

目录 一、挂载光盘到目录下 二、配置本地yum源仓库 一、挂载光盘到目录下 mount /dev/cdrom /mnt/ #把光盘挂载到/mnt目录下 挂载 设备 目录或文件夹 注&#xff1a;最好是空的 原来的数据将被隐藏一个挂载点同一时只能挂载一个设备。 mount /dev…

opencv中凸包运算函数convexHull()的使用

操作系统&#xff1a;ubuntu22.04OpenCV版本&#xff1a;OpenCV4.9IDE:Visual Studio Code编程语言&#xff1a;C11 1.功能描述 该函数cv::convexHull用于寻找一组二维点集的凸包&#xff0c;采用的是Sklansky算法[242]&#xff0c;当前实现中具有O(N logN)的时间复杂度。 1…

【ai】tx2-nx 查看 jetpack 版本信息及对应的tritonserver

3 jtop nvidia@tx2-nx:~$ jtop [WARN] Board missing UNKNOWN (press CTRL + Click) nvidia@tx2-nx:~$ 点击info 可以看到 jetpack是4.6opencv 是4.1.15.1.2 的不适合我 tritonserver2.35.0-jetpack5.1.2-update-2.tgz tritonserver2.19.0-jetpack4.6.1.tgz. 4.6.1<

滚动轴承振动信号异常检测方法总结(NASA-IMS轴承数据,Python)

之前的文章&#xff1a; 基于自编码器的滚动轴承异常检测方法&#xff08;NASA-IMS轴承数据&#xff0c;Python&#xff09; 基于单类支持向量机的滚动轴承异常检测方法&#xff08;NASA-IMS轴承数据&#xff0c;Python&#xff09; 基于主成分分析的滚动轴承异常检测方法&a…

Python运算符重载,代码秒变高大上!

目录 1、运算符重载基础介绍 🧮 1.1 什么是运算符重载 1.2 为何使用运算符重载 1.3 Python中的特殊方法魔法 示例:重载加法运算符 2、实战:重载加法运算符 + 🧩 2.1 自定义类与__add__() 2.2 应用案例:复数加法 2.3 深入理解__add__方法 3、重载其他运算符示例…

js实现canvas截图功能

关键代码 使用canvas的导出功能和drawImage函数 class CropShape{cropShape(shape){let {x,y,w,h} shapeconsole.log(x,y,w,h)const roiCanvas document.createElement(canvas);document.getElementById(app).append(roiCanvas)const roiCtx roiCanvas.getContext(2d);roi…

如何选择理想CDN服务商来提升网站性能

在数字时代&#xff0c;网络速度已成为衡量网站成功的关键指标之一。快速加载的网站不仅提升用户体验&#xff0c;还对网站的搜索引擎排名产生显著影响。用户期望网站能够迅速响应其请求&#xff0c;而任何延迟都可能导致用户不满和流失。研究表明&#xff0c;网站加载时间的每…

【产品经理】订单处理6-审单方案

电商系统中订单管理员会对特殊类型的订单进行审核&#xff0c;普通订单则自动审核&#xff0c;本节讲述自动审单方案、手动审单以及加急审单。 一、自动审单 自动审单方案可按照方案形式制定&#xff0c;可一次性制定多套审单方案。 1. 审单通过条件有 执行店铺&#xff…

Python爬虫实战:淘宝商品爬取与数据分析

一、爬虫技术概述 爬虫技术是一种在互联网上自动收集信息的方法。通过编写程序&#xff0c;让计算机自动访问网站&#xff0c;获取所需数据&#xff0c;并进行分析和处理。Python作为一种功能强大、易于学习的编程语言&#xff0c;其爬虫库Scrapy更是爬虫技术的利器。 二、淘…

段码屏省电低功耗驱动芯片PC164S32|128点阵|低功耗LCD屏专用芯片

1 简介 PC164S32 是一款支持 128 点 (32 4)显示 的多功能 LCD 控制器芯片&#xff0c;内部存储器RAM数据直接映射到 LCD 显示。可软件配置特性使其适用于包括 LCD 模块和显示子系统在内的多种 LCD 应用。主控制器与 PC164S32接口仅需3 或 4 条线。内置的省电模式极大的降低了功…

LangChain入门到精通,看这这篇吊打面试官

导语 在人工智能领域的不断发展中&#xff0c;语言模型扮演着重要的角色。特别是大型语言模型&#xff08;LLM&#xff09;&#xff0c;如ChatGPT&#xff0c;已经成为科技领域的热门话题&#xff0c;并受到广泛认可。在这个背景下&#xff0c;LangChain作为一个以LLM模型为核…