js实现浮动在网页右侧的简洁QQ在线客服代码


Posted in Javascript onSeptember 04, 2015

本文实例讲述了js实现浮动在网页右侧的简洁QQ在线客服代码。分享给大家供大家参考。具体如下:

这是一个简洁版的QQ在线客服,其实重要的是这个JS函数,只要有了这个JS函数,实际上你完全可以写一个这样的在线客服,它是用JS+CSS去控制层的隐藏与展开。注意代码中的QQ号记着要改一下哦。

运行效果截图如下:

js实现浮动在网页右侧的简洁QQ在线客服代码

js实现浮动在网页右侧的简洁QQ在线客服代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>js实现浮动在网页右侧的简洁QQ在线客服</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
.qqbox a:link {
 color: #000;
 text-decoration: none;
}
.qqbox a:visited {
 color: #000;
 text-decoration: none;
}
.qqbox a:hover {
 color: #f80000;
 text-decoration: underline;
}
.qqbox a:active {
 color: #f80000;
 text-decoration: underline;
}
.qqbox{
 width:132px;
 height:auto;
 overflow:hidden;
 position:absolute;
 right:0;
 top:100px;
 color:#000000;
 font-size:12px;
 letter-spacing:0px;
}
.qqlv{
 width:25px;
 height:256px;
 overflow:hidden;
 position:relative;
 float:right;
 z-index:50px;
}
.qqkf{
 width:120px;
 height:auto;
 overflow:hidden;
 right:0;
 top:0;
 z-index:99px;
 border:6px solid #138907;
 background:#fff;
}
.qqkfbt{
 width:118px;
 height:20px;
 overflow:hidden;
 background:#138907;
 line-height:20px;
 font-weight:bold;
 color:#fff;
 position:relative;
 border:1px solid #9CD052;
 cursor:pointer;
 text-align:center;
}
.qqkfhm{
 width:112px;
 height:22px;
 overflow:hidden;
 line-height:22px;
 padding-right:8px;
 position:relative;
 margin:3px 0;
}
.bgdh{
 width:102px;
 padding-left:10px;
}
</style>
</head>
<body>
<div class="qqbox" id="divQQbox">
 <div class="qqlv" id="meumid" onmouseover="show()"><img src="images/qq.gif"></div>
 <div class="qqkf" style="display:none;" id="contentid" onmouseout="hideMsgBox(event)">
 <div class="qqkfbt" onmouseout="showandhide('qq-','qqkfbt','qqkfbt','K',1,1);" id="qq-1" onfocus="this.blur();">客 服 中 心</div>
 <div id="K1">
 <div class="qqkfhm bgdh"> <a href="tencent://message/?uin=2563256" title="悠 然 设 计"><img src="http://wpa.qq.com/pa?p=1:981389008:4" border="0">主机业务</a><br/></div>
 <div class="qqkfhm bgdh"> <a href="tencent://message/?uin=365286" title="网页制作"><img src="http://wpa.qq.com/pa?p=1:981389008:4" border="0">租用托管</a></div>
 <div class="qqkfhm bgdh">手机:12345692877</div>
 </div>
 </div>
</div>
<script language="javascript">
function showandhide(h_id,hon_class,hout_class,c_id,totalnumber,activeno) {
 var h_id,hon_id,hout_id,c_id,totalnumber,activeno;
 for (var i=1;i<=totalnumber;i++) {
 document.getElementById(c_id+i).style.display='none';
 document.getElementById(h_id+i).className=hout_class;
 }
 document.getElementById(c_id+activeno).style.display='block';
 document.getElementById(h_id+activeno).className=hon_class;
}
var tips; 
var theTop = 40;
var old = theTop;
function initFloatTips() 
{ 
 tips = document.getElementById('divQQbox');
 moveTips();
}
function moveTips()
{
   var tt=50; 
   if (window.innerHeight) 
   {
    pos = window.pageYOffset 
   }else if (document.documentElement && document.documentElement.scrollTop) {
    pos = document.documentElement.scrollTop 
   }else if (document.body) {
   pos = document.body.scrollTop; 
   }
   pos=pos-tips.offsetTop+theTop; 
   pos=tips.offsetTop+pos/10; 
   if (pos < theTop){
    pos = theTop;
   }
   if (pos != old) { 
    tips.style.top = pos+"px";
    tt=10; //alert(tips.style.top); 
   }
   old = pos;
   setTimeout(moveTips,tt);
}
initFloatTips();
 if(typeof(HTMLElement)!="undefined") //firefox定义contains()方法,ie下不起作用
  { 
   HTMLElement.prototype.contains=function (obj) 
   { 
    while(obj!=null&&typeof(obj.tagName)!="undefind"){
    if(obj==this) return true; 
  
   obj=obj.parentNode;
  
  } 
    return false; 
   }
 }
function show()
{
 document.getElementById("meumid").style.display="none"
 document.getElementById("contentid").style.display="block"
}
 function hideMsgBox(theEvent){
  if (theEvent){
  var browser=navigator.userAgent;
  if (browser.indexOf("Firefox")>0){ //如果是Firefox
   if (document.getElementById("contentid").contains(theEvent.relatedTarget)) {
    return
   }
  }
  if (browser.indexOf("MSIE")>0 || browser.indexOf("Presto")>=0){
  if (document.getElementById('contentid').contains(event.toElement)) {
    return; 
   }
  }
  }
  document.getElementById("meumid").style.display = "block";
  document.getElementById("contentid").style.display = "none";
  }
</script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
js 字符串操作函数
Jul 25 Javascript
JavaScript简单实现网页回到顶部功能
Nov 12 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
Javascript中arguments用法实例分析
Jun 13 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
Sep 29 Javascript
JS中静态页面实现微信分享功能
Feb 06 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
再谈Angular4 脏值检测(性能优化)
Apr 23 Javascript
一文了解vue-router之hash模式和history模式
May 31 Javascript
countUp.js实现数字动态变化效果
Oct 17 Javascript
详解小程序如何动态绑定点击的执行方法
Nov 26 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 #Javascript
JavaScript实现的多个图片广告交替显示效果代码
Sep 04 #Javascript
基于JS实现简单的样式切换效果代码
Sep 04 #Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 #Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
Sep 04 #Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
Sep 04 #Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 #Javascript
You might like
php文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
PHP中常用的转义函数
2014/02/28 PHP
Yii中CGridView关联表搜索排序方法实例详解
2014/12/03 PHP
PHP截取指定图片大小的方法
2014/12/10 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
JavaScript定义类的几种方式总结
2014/01/06 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
p5.js 毕达哥拉斯树的实现代码
2018/03/23 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
vue 移动端注入骨架屏的配置方法
2019/06/25 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
[50:44]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第二场 2月22日
2021/03/11 DOTA
Python群发邮件实例代码
2014/01/03 Python
python版飞机大战代码分享
2018/11/20 Python
Python使用pyshp库读取shapefile信息的方法
2018/12/29 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
简单了解python的break、continue、pass
2019/07/08 Python
python如何从文件读取数据及解析
2019/09/19 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
pytorch的batch normalize使用详解
2020/01/15 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
Python requests HTTP验证登录实现流程
2020/11/05 Python
HTML5 Canvas概述
2009/08/26 HTML / CSS
委托与事件是什么关系?为什么要使用委托
2014/04/18 面试题
升职自荐书范文
2013/11/28 职场文书
培训心得体会
2013/12/29 职场文书
银行委托书范本
2014/04/04 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
队列队形口号
2015/12/25 职场文书