蓝色展开收缩悬浮QQ客服代码
放在我的博客首页上的的预览图:
在文章区的预览图如下:
代码如下:
<div class="scrollsidebar" id="scrollsidebar">
<div class="side_content">
<div class="side_list">
<div class="side_title"><a title="隐藏" class="close_btn"><span>关闭</span></a></div>
<div class="side_center">
<div class="custom_service">
<p> <a title="点击这里给我发消息" href="tencent://message/?uin=2669803073&Site=https://www.cnblogs.com/qrk666/&Menu=yes" target="_blank"><img src="http://wpa.qq.com/pa?p=2:8983659:41"></a> </p>
</div>
<div class="other">
<p><img src="https://images.cnblogs.com/cnblogs_com/qrk666/1750660/o_200504090346AD4BE6AC10146679D7FC4C3718A63A37.jpg" width="120"/></p>
<p>QQ</p>
<p>2669803073</p>
</div>
<div class="msgserver">
<p><a href="tencent://message/?uin=2669803073&Site=https://www.cnblogs.com/qrk666/&Menu=yes" >联系</a></p>
</div>
</div>
<div class="side_bottom"></div>
</div>
</div>
<div class="show_btn"><span>在线客服</span></div>
</div> <script type="text/javascript">!(function() {
var serviceOnline = (function() {
var sideContent = document.querySelector(".side_content");
var show_btn = document.querySelector(".show_btn");
var close_btn = document.querySelector(".close_btn");
var timer = null; //悬浮QQ匀速移动
var startMove = function(argument) {
var scrollsidebar = document.getElementById("scrollsidebar");
clearInterval(timer);
timer = setInterval(function() {
var speed = (argument - scrollsidebar.offsetTop) / 4;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (argument == scrollsidebar.offsetTop) {
clearInterval(timer);
} else {
scrollsidebar.style.top = scrollsidebar.offsetTop + speed + "px";
}
}, 20);
}; //鼠标移动
var scrollMove = function() {
window.onscroll = window.onload = function() {
var scrollsidebar = document.getElementById("scrollsidebar");
var scrolltop =
document.body.scrollTop || document.documentElement.scrollTop;
startMove(
parseInt(
(document.documentElement.clientHeight -
scrollsidebar.offsetHeight) /2 +scrolltop
)
);
};
}; //悬浮QQ显示
var slideShow = function() {
if (!show_btn) return false;
show_btn.addEventListener(
"click",
function() {
show_btn.style.width = 0;
sideContent.style.width = "154px";
},
false
);
}; //悬浮QQ隐藏
var slideClose = function() {
if (!close_btn) return false;
close_btn.addEventListener(
"click",
function() {
console.log(this);
sideContent.style.width = 0;
show_btn.style.width = "25px";
},
false
);
}; //返回出来的方法
return {
init: function() {
scrollMove();
slideClose();
slideShow();
}
};
})(); //初始化
serviceOnline.init();
})();</script>
/*下面是加QQ弹框c's's*/
html {overflow-x:hidden;} .custom_service p img {display: inline; vertical-align:middle;}
.scrollsidebar{position:absolute; z-index:; top:350px;right:}
.side_content{width:154px; height:auto; overflow:hidden; float:left; }
.side_content .side_list {width:154px;overflow:hidden;}
.show_btn{ width:; height:112px; overflow:hidden; margin-top:50px; float:left; cursor:pointer;}
.show_btn span { display:none;}
.close_btn{width:24px;height:24px;cursor:pointer;}
.side_title,.side_bottom,.close_btn,.show_btn {background:url(../images/sidebar_bg.png) no-repeat;}
.side_title {height:46px;}
.side_bottom { height:8px;}
.side_center {font-family:Verdana, Geneva, sans-serif; padding:5px 12px; font-size:12px;}
.close_btn { float:right; display:block; width:21px; height:16px; margin:16px 10px 0 0; _margin:16px 5px 0 0;}
.close_btn span { display:none;}
.side_center .custom_service p { text-align:center; padding:6px 0; margin:; vertical-align:middle;}
.other { text-align:center;border-bottom:1px solid #ddd;border-top:1px solid #ddd}
.other p { padding:5px 0; _height:16px; margin:;color: #666666;}
.msgserver { text-align:center; margin-bottom:5px;}
.msgserver a { background:url(../images/sidebar_bg.png) no-repeat -119px -115px; padding-left:22px;} /* blue skin as the default skin */
.side_title, .side_blue .side_title {background-position:-195px 0;}
.side_center, .side_blue .side_center {background:url(../images/blue_line.png) repeat-y center;}
.side_bottom, .side_blue .side_bottom {background-position:-195px -50px;}
.close_btn, .side_blue .close_btn {background-position:-44px 0;}
.close_btn:hover, .side_blue .close_btn:hover {background-position:-66px 0;}
.show_btn , .side_blue .show_btn {background-position:-119px 0;}
.msgserver a, .side_blue .msgserver a {color:#06C;} /* green skin */
.side_green .side_title {background-position:-349px 0;}
.side_green .side_center {background:url(../images/green_line.png) repeat-y center;}
.side_green .side_bottom {background-position:-349px -50px;}
.side_green .close_btn {background-position:-44px -23px;}
.side_green .close_btn:hover {background-position:-66px -23px;}
.side_green .show_btn {background-position:-147px 0;}
.side_green .msgserver a {color:#76a20c;}
注:可以直接使用,两段代码都要用上
蓝色展开收缩悬浮QQ客服代码的更多相关文章
- 基于jquery打造的网页右侧自动收缩浮动在线客服代码
基于jquery打造的网页右侧自动收缩浮动在线QQ客服代码, 当前比较流行的一款QQ在线jquery特效代码, 代码中还带有IE6下PNG图片透明的特效,如果想研究IE6下PNG透明的同学也可以下载研 ...
- jQuery网页右侧固定层显示隐藏在线qq客服代码
CSS代码: @charset "utf-8"; ;;} html,body{font-size:12px;font-family:"微软雅黑";outline ...
- QQ客服代码,支持临时会话
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=QQ号&site=qq&m ...
- 网页qq客服代码并自定义图片
<script>var online= new Array();</script> <script src="http://webpresence.qq.com ...
- qq客服代码实现过程
引入css,jsimages,将index.html中的qq聊天代码部分和返回顶部-部分放在head.html文件中, 将文中圈中部分删除,否则影响整个页面的样式:
- qq客服代码
http://shang.qq.com/v3/widget.html <a target="_blank" href="http://wpa.qq.com/msgr ...
- PC QQ客服代码
一. <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=QQ号&site=qq&am ...
- 网站QQ客服链接代码
个人QQ客服代码 <a href="tencent://message/?uin=QQ号码">在线咨询</a> 企业QQ客服代码 <a href=&q ...
- QQ,MSN,Skype在线客服代码
QQ,MSN,Skype在线客服代码 在网站建设时,为了更好的实施网站的营销型,会用到QQ,MSN等在线交流,以便客户能够快捷方便的联系我们.在这里,提供QQ,MSN的在线客服代码给大家分享: 1.Q ...
随机推荐
- spark sql error mismatched input 'union' expecting { <EOF>,''................................
给union的前后sql加括号就可以解决
- 在linux中使用mailx发送邮件
[root@ml ~]# yum -y install mailx #安装 [root@ml ~]# vim /etc/mail.rc 在最后一行添加(我这里使用的是qq邮箱): @qq.com ...
- 想进大厂嘛?这里有一份通关秘籍:iOS大厂面试宝典
1.NSArray与NSSet的区别? NSArray内存中存储地址连续,而NSSet不连续 NSSet效率高,内部使用hash查找:NSArray查找需要遍历 NSSet通过anyObject访问元 ...
- CentOS8.1.1911正式发布!
前阵子,CentOS官方宣布:CentOS8.1.1911正式发布!已经安装CentOS8.0的朋友,可以执行yum update更新(笔者更新了2次),体验下新版本!如是新安装,可以从官方网站下载h ...
- 获取SVG中g标签的宽度高度及位置坐标
1. 问题的出现 对于普通的HTML元素,有很多获得其宽度width.高度height.距左left.距顶top等属性的方法: 类似offsetWidth,clientWidth,width之类的,通 ...
- Salesforce元数据入门指南,管理员必看!
元数据是Salesforce基础架构的核心,是Salesforce中的核心组件或功能.没有元数据,大部分功能都无法实现. 但是,某些Salesforce管理员仍然很难掌握元数据的整个范围,并且无法充分 ...
- C - Max Sum Plus Plus HDU - 1024
用二位数组dp[i][j]记录组数为i,前j个数字的最大子段和. 转移方程: dp[i][j],考虑第j个数,第j个数可以并到前面那一组,此时dp[i][j]=dp[i][j-1]+arr[j],第j ...
- C. Standard Free2play --div
https://codeforces.com/contest/1238/problem/C 题意:下台阶的时候只有一种方式,拉动当前台阶x的 level,然后当前的台阶关闭,调到下边的台阶x-1,如果 ...
- 搭建Ubuntu虚拟机
搭建Ubuntu虚拟机 前言 1. 啰嗦一下 1.1 ubuntu虚拟机的作用 1.2 为什么选择Ubuntu 1.3 工具准备 2. 正式开始 2.1 安装VMware 2.2 创建Ubuntu虚拟 ...
- python调用word2vec工具包安装和使用指南
python调用word2vec工具包安装和使用指南 word2vec python-toolkit installation and use tutorial 本文选译自英文版,代码注释均摘自本文, ...