字体大小: 【返回】
您的位置:首页 > 资讯中心 > > 正文阅读

QQ在线咨询浮动客服代码,上下浮动型兼容firefox

来源:sugood.com 发布时间:2011-8-31 阅读:8850次

Description: 以往的文章发了QQ在线咨询代码,这个共享的QQ客服代码,有朋友说这个在IE上使用的比较好,却是在firefox下就失灵了,不会上下浮动的。现在我又找了一个,上下浮动型QQ在线咨询客服代码,上下浮动型完美兼容firefox,木有拖动效果。
下面看代码:

在网上找的比较漂亮的qq在线客服代码   (function(){
QQMenuInt=_QQMenuInt;
moveQQmenu=_moveQQmenu;
function _QQMenuInt(){
QQMenu.style.position="absolute";
QQMenu.style.display="";
if(parseInt(document.documentElement.offsetWidth)>1024){
QQMenuPosition.Left+=(parseInt(document.documentElement.offsetWidth)-1024-20);
}
if(QQMenuPosition.isRight){
QQMenu.style.right=QQMenuPosition.Left+"px";
}else{
QQMenu.style.left=QQMenuPosition.Left+"px";
}
QQMenu.style.top=QQMenuPosition.Top+"px";
moveQQmenu();
}
function _moveQQmenu(){
var from=parseInt(QQMenu.style.top,10);
var yOffset;
var to=window.pageYOffset?window.pageYOffset:document.documentElement.scrollTop;
to=to+QQMenuPosition.Top;
if(to!=from){
yOffset = Math.ceil(Math.abs(to-from)/20);
if(to<from)yOffset=-yOffset;
var oldTop=parseInt(QQMenu.style.top,10);
QQMenu.style.top=(oldTop+yOffset)+"px";
}
if(QQMenu.style.display!="none"){
window.setTimeout("moveQQmenu()",QQMenuPosition.timeout);
}
}
})()

使用方法:
1、引入上面的js
2、在页面的最后面加上
[复制此代码]CODE:
<script type="text/javascript">
var QQMenuPosition={Left:10,Top:200,isRight:false,timeout:10}
var QQMenu=document.getElementById("QQMenu");
QQMenuInt();
</script>

QQMenu为漂浮层的最外层ID
QQMenuPosition是设置漂浮层相关参数
Left:层相对于左侧的偏移量。如果isRight为true则是相对于右侧的偏移量
Top:层相对于顶部的偏移量
timeout:层移动时间间隔,越大越慢

运行代码:

<!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>Untitled</title>
    <style type="text/css">
        /*QQ在线客服务处*/
        .kefuchu{ width:109px;}
        .SS_dh1{background:url(SS_dh1.jpg) no-repeat; height:51px; width:84px; float:left}
        .SS_dh2{background:url(SS_dh2.jpg) no-repeat; height:51px; width:25px; float:left; display:block}
        .SS_dh3{background:url(dh3.jpg) repeat-y; width:109px; }
        .SS_dh4{background:url(dh4.jpg) no-repeat; height:17px; width:109px; }
        .SS_dh5{background:url(dh5.jpg) no-repeat; height:23px; width:74px; margin-left:20px;}
    </style>
    <script type="text/javascript" src="QQMenu.js"></script>
</head>

<body>

Test Content !!


<!--QQ在线客服务处-->
    <div class="kefuchu" id="QQMenu" style="display:none;">
        <div class="SS_dh1"></div>
        <a class="SS_dh2" href="javascript:void(0)" onclick="QQMenu.style.display='none'"></a>
        <span class="clear"></span>
        <div class="SS_dh3">
            <div class="SS_dh5">QQ在线状态代码</div>
            <span class="clear"></span>
            <span class="blank8"></span>
           
        <span class="clear"></span>
        <div class="SS_dh4"></div>
    </div>
<script type="text/javascript">
    var QQMenuPosition={Left:10,Top:200,isRight:false,timeout:10}
    var QQMenu=document.getElementById("QQMenu");
    QQMenuInt();
</script>
</body>
</html>

 

 

QQMenu.js   :

 

(function(){
 QQMenuInt=_QQMenuInt;
  moveQQmenu=_moveQQmenu;
  function _QQMenuInt(){
   QQMenu.style.position="absolute";
   QQMenu.style.display="";
   if(parseInt(document.documentElement.offsetWidth)>1024){
    QQMenuPosition.Left+=(parseInt(document.documentElement.offsetWidth)-1024-20);
   }
   if(QQMenuPosition.isRight){
   QQMenu.style.right=QQMenuPosition.Left+"px";
  }else{
   QQMenu.style.left=QQMenuPosition.Left+"px";
  }
  QQMenu.style.top=QQMenuPosition.Top+"px";
  moveQQmenu();
  }
 function _moveQQmenu(){
  var from=parseInt(QQMenu.style.top,10);
  var yOffset;
  var to=window.pageYOffset?window.pageYOffset:document.documentElement.scrollTop;
  to=to+QQMenuPosition.Top;
  if(to!=from){
   yOffset = Math.ceil(Math.abs(to-from)/20);
   if(to<from)yOffset=-yOffset;
   var oldTop=parseInt(QQMenu.style.top,10);
   QQMenu.style.top=(oldTop+yOffset)+"px";
  }
  if(QQMenu.style.display!="none"){
   window.setTimeout("moveQQmenu()",QQMenuPosition.timeout);
  }
 }
})()


免责声明:力倡网络文化,崇尚互联共享。本站所发表的文章新闻资讯,部份来自互联网转载,若有冒犯原创之处请来信告知,我们第一时间内删除。同时所发表或转载的文章新闻信息,并不代表本站赞同或者支持该文的观点,我们的立场仅限于传播更多读者感兴趣的信息。