当前位置：Gxlcms > JavaScript > 可浮动QQ在线客服

可浮动QQ在线客服

时间：2021-07-01 10:21:17 帮助过：10人阅读

代码如下:
(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、在页面的最后面加上

代码如下:
<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(http://img.jb51.net/online/qq/images/SSindex/SS_dh1.jpg) no-repeat; height:51px; width:84px; float:left} 
        .SS_dh2{background:url(http://img.jb51.net/online/qq/images/SSindex/SS_dh2.jpg) no-repeat; height:51px; width:25px; float:left; display:block} 
        .SS_dh3{background:url(http://img.jb51.net/online/qq/images/SSindex/SS_dh3.jpg) repeat-y; width:109px; } 
        .SS_dh4{background:url(http://img.jb51.net/online/qq/images/SSindex/SS_dh4.jpg) no-repeat; height:17px; width:109px; } 
        .SS_dh5{background:url(http://img.jb51.net/online/qq/images/SSindex/SS_dh5.jpg) no-repeat; height:23px; width:74px; margin-left:20px;} 
    </style> 
    <script type="text/javascript" src="http://img.jb51.net/online/qq/js/QQMenu.js"></script> 
</head>

<body>

fsdafsdfsfsdf

fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf

fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf

fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf

fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf

fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf

fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf

fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf

fsdafsdfsfsdf

fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf

fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf

fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf

fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf

fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf

fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf

fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf

fsdafsdfsfsdf 
 
     
         
         
        <span class="clear"></span> 
         
            <img border="0" SRC='new/2019-09-17-201917/button_old_11.gif' alt="www.gxlcms.com"> 
            <span class="clear"></span> 
            <span class="blank8"></span> 
            <img border="0" SRC='new/2019-09-17-201917/button_old_11.gif' alt="www.gxlcms.com"> 
            <span class="clear"></span> 
            <span class="blank8"></span> 
            <img border="0" SRC='new/2019-09-17-201917/button_old_11.gif' alt="www.gxlcms.com"> 
            <span class="clear"></span> 
            <span class="blank8"></span> 
            <img border="0" SRC='new/2019-09-17-201917/button_old_11.gif' alt="www.gxlcms.com"> 
            <span class="clear"></span> 
            <span class="blank8"></span> 
            <img border="0" SRC='new/2019-09-17-201917/button_old_11.gif' alt="www.gxlcms.com"> 
            <span class="clear"></span> 
            <span class="blank8"></span> 
            <img border="0" SRC='new/2019-09-17-201917/button_old_11.gif' alt="www.gxlcms.com"> 
            <span class="clear"></span> 
            <span class="blank8"></span> 
            <img border="0" SRC='new/2019-09-17-201917/button_old_11.gif' alt="www.gxlcms.com"> 
            <span class="clear"></span> 
         
        <span class="clear"></span> 
         
     
<script type="text/javascript"> 
    var QQMenuPosition={Left:10,Top:200,isRight:false,timeout:10} 
    var QQMenu=document.getElementById("QQMenu"); 
    QQMenuInt(); 
</script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
打包下载

可浮动QQ在线客服

人气教程排行