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中将字符串转换成json的三种方式
Jan 12 Javascript
jQuery 操作option的实现代码
Mar 03 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
Jan 13 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
Apr 24 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 Javascript
js 轮播效果实例分享
Dec 28 Javascript
JavaScript日期对象(Date)基本用法示例
Jan 18 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
May 17 Javascript
vue-router两种模式区别及使用注意事项详解
Aug 01 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 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防止post重复提交数据的简单例子
2014/06/07 PHP
php实现RSA加密类实例
2015/03/26 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
纯JS实现的批量图片预览加载功能
2011/08/14 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
老生常谈jquery中detach()和remove()的区别
2017/03/02 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
vue 注册组件的使用详解
2018/05/05 Javascript
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
js实现小星星游戏
2020/03/23 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
Python中random模块用法实例分析
2015/05/19 Python
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
python使用knn实现特征向量分类
2018/12/26 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
python3实现往mysql中插入datetime类型的数据
2020/03/02 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
Lululemon英国官网:加拿大瑜伽服装品牌
2019/01/14 全球购物
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
银行演讲稿范文
2014/01/03 职场文书
违反工作纪律检讨书
2014/02/15 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
JavaScript中isPrototypeOf函数
2021/11/07 Javascript