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 相关文章推荐
javascript仿php的print_r函数输出json数据
Sep 13 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
深入探讨javascript中的数据类型
Mar 04 Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 Javascript
JS代码实现根据时间变换页面背景效果
Jun 16 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
JS实现的自动打字效果示例
Mar 10 Javascript
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
JavaScript门面模式详解
Oct 19 Javascript
zepto.js 实时监听输入框的方法
Dec 04 Javascript
小程序登录之支付宝授权的实现示例
Dec 13 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
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
php面向对象 字段的声明与使用
2012/06/14 PHP
PHP去掉从word直接粘贴过来的没有用格式的函数
2012/10/29 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
简单的前端js+ajax 购物车框架(入门篇)
2011/10/29 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
Javascript限制网页只能在微信内置浏览器中访问
2014/11/09 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
Easyui和zTree两种方式分别实现树形下拉框
2017/08/04 Javascript
nodejs 如何手动实现服务器
2018/08/20 NodeJs
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
[02:05]2014DOTA2国际邀请赛 BBC外卡赛赛后总结
2014/07/09 DOTA
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
Python正则表达式匹配ip地址实例
2014/10/09 Python
python基于隐马尔可夫模型实现中文拼音输入
2016/04/01 Python
使用Python实现博客上进行自动翻页
2017/08/23 Python
Python中类的初始化特殊方法
2017/12/01 Python
Python 常用模块 re 使用方法详解
2019/06/06 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
Python GUI自动化实现绕过验证码登录
2020/01/10 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
Python3实现打印任意宽度的菱形代码
2020/04/12 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
解决python3输入的坑——input()
2020/12/05 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
C有"按引用传递"吗
2016/09/06 面试题
自荐书封面下载
2013/11/29 职场文书
《二泉映月》教学反思
2014/04/15 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
师德标兵事迹材料
2014/12/19 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server
【海涛解说】史上最给力比赛,挑战DOTA极限
2022/04/01 DOTA
python playwright之元素定位示例详解
2022/07/23 Python