给网页添加一个QQ客服悬浮框
时间:2022-05-31
本文章向大家介绍给网页添加一个QQ客服悬浮框,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
扒一个QQ客服悬浮框的代码,需要修改的地方都注释了,自己在用的时候再给他添加一个悬浮的css即可,已经设置好定时出现和滚动标题
<style type="text/css">
* { padding:0; margin:0; font-family:Microsoft YaHei,Simsun;}
.main {display:none;width:327px;height:172px; background-repeat:no-repeat;}
.bg { background-image:url(http://s-api.yunvm.com/young/bg.png)}
.btn { position:absolute; display:block;}
.launchBtn { top:145px; left:173px; width:69px; height:22px;}
.laterBtn { top:145px; left:248px; width:69px; height:22px;}
.closeBtn { top:0;left: 283px;; width:39px; height:26px;}
.title { position:absolute; top:1px; left:17px; height:30px; line-height:30px; font-size:16px; color:#000;}
.content { position:absolute; top:45px; left:114px; width:203px; height:85px;}
.content .msg { font-size:12px; color:#000; line-height:25px;}
</style>
<div class="main bg" id="qqlos" width="327px;">
<a id="launchBtn" class="launchBtn btn" href="javascript:qqtalk();"></a><a id="laterBtn" class="laterBtn btn" href="javascript:hide();"></a><a id="closeBtn" class="closeBtn btn" href="javascript:hide();"></a>
<p id="title" class="title">
在线咨询
</p>
<div class="content">
<p id="msg" class="msg">您好,请问有什么可以帮到您?请接受聊天邀请。</p>
</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function(){
/*定时显示这个客服框1秒=1000*/
setTimeout('show()',10000);
});
function qqtalk(){
/*自行替换1170535111为自己的QQ*/
window.open("http://wpa.qq.com/msgrd?v=3&uin=1170535111&site=qq&menu=yes");
}
function hide(){
document.getElementById('qqlos').style.display='none';
}
function show(){
document.getElementById('qqlos').style.display='block';
/*滚动标题*/
var s="【你有一条新消息】".split("");
function func(){
s.push(s[0]);
s.shift();
document.title = s.join("");
}
/*滚动速度*/
setInterval(func,1000);
}
</script>
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- WordPress调用分类目录 及输出当前分类下的二级目录 和分类文章数量显示
- CSS让Li标签溢出后自动换行
- docker里运行docker命令
- 一次性实战java8 新特性(全)—— Lambda、Optional、stream、DateTime
- 面试Python高频问题汇总
- python自学成才之路 miniconda创建虚拟环境
- 逐行阅读Spring5.X源码(一) BeanDefinition,起点
- linux 磁盘占满 查看占用
- 逐行阅读Spring5.X源码(二) BeanDefinition的父接口-AttributeAccessor 、BeanMetadataElement ,进阶
- 64. Vue中的插槽slot
- 65. Vue中的作用域插槽
- SpringBoot : 全局异常配置
- springboot事务管理
- Java : 分享一个通用的获取请求客户端IP的方法
- 一套常用的css初始化样式