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 相关文章推荐
Node.js中使用计时器定时执行函数详解
Aug 15 Javascript
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 Javascript
JavaScript弹出对话框的三种方式
Mar 23 Javascript
JS中取二维数组中最大值的方法汇总
Apr 17 Javascript
JS全局变量和局部变量最新解析
Jun 24 Javascript
js html css实现复选框全选与反选
Oct 09 Javascript
angular 动态组件类型详解(四种组件类型)
Feb 22 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
浅谈angularjs中响应回车事件
Apr 24 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
Jun 08 Javascript
React Native AsyncStorage本地存储工具类
Oct 24 Javascript
微信提示 在浏览器打开 效果实现过程解析
Sep 10 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类的静态(static)方法和静态(static)变量使用介绍
2012/02/19 PHP
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
php实现有序数组打印或排序的方法【附Python、C及Go语言实现代码】
2016/11/10 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
IE8 浏览器Cookie的处理
2009/01/31 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
Jquery easyui 下loaing效果示例代码
2013/08/12 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
jQuery遍历Table应用示例
2014/04/09 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
JS实现星星评分功能实例代码(两种方法)
2016/06/09 Javascript
你有必要知道的10个JavaScript难点
2017/07/25 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
2019/11/04 Javascript
React中Ref 的使用方法详解
2020/04/28 Javascript
TypeScript魔法堂之枚举的超实用手册
2020/10/29 Javascript
[02:43]2018DOTA2亚洲邀请赛主赛事首日TOP5
2018/04/04 DOTA
[03:00]DOTA2-DPC中国联赛1月18日Recap集锦
2021/03/11 DOTA
Python的Flask框架中@app.route的用法教程
2015/03/31 Python
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
Django中url的反向查询的方法
2018/03/14 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
Python接口测试环境搭建过程详解
2020/06/29 Python
远程调用的原理
2014/07/05 面试题
优秀毕业生自荐信范文
2014/01/01 职场文书
领导班子对照检查材料
2014/09/22 职场文书
学校国庆节活动总结
2015/03/23 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
Python中的 No Module named ***问题及解决
2022/07/23 Python