浮动QQ在线客服实现代码

187 浏览量更新于2024-08-29 收藏 34KB PDF 举报

该资源提供了一段JavaScript代码，用于实现一个可浮动的QQ在线客服功能。这段代码使得QQ客服图标能够在网页中随着用户的滚动而保持固定的位置，提高用户体验。详细解释： 1. **浮动QQ在线客服**: 这个功能允许网站用户在浏览页面时始终能看到并访问QQ客服，即使他们在页面的任何位置滚动。这样可以确保用户随时能够寻求帮助，增加互动性。 2. **JavaScript函数**: 代码中定义了两个主要的函数，`_QQMenuInt` 和 `moveQQmenu`。 - `_QQMenuInt` 函数是初始化和调整QQ客服菜单位置的函数。它首先设置QQMenu的CSS属性，如position为absolute，并根据浏览器窗口的宽度来调整其位置，确保在宽屏模式下不会超出屏幕。同时，它调用了 `moveQQmenu` 函数，使得QQMenu能随页面滚动而移动。 - `moveQQmenu` 函数负责实时更新QQMenu的top位置，通过计算当前页面的滚动位置和目标位置，平滑地移动QQMenu。它使用了setTimeout来定期执行自身，模拟平滑滚动效果。 3. **代码实现**: - 首先，你需要在HTML文件中引入提供的JavaScript代码。 - 然后，在页面的最后添加一个JavaScript块，其中定义了变量`QQMenuPosition`，用于存储QQMenu的位置信息，如Left、Top和isRight等属性。这些属性将根据用户的滚动行为和页面布局动态调整。 - 通过设置`QQMenu.style.left` 或 `QQMenu.style.right`，代码会根据浏览器窗口宽度确定客服图标应显示在屏幕的哪一侧。 - `QQMenu.style.top` 的值则通过 `moveQQmenu` 函数不断更新，使得QQMenu始终保持在相对于页面顶部的特定位置。 4. **使用方法**: - 第一步：将提供的JavaScript代码插入到HTML文件中合适的位置，通常是在`<head>`或`<body>`标签内，但必须在QQ客服元素之前。 - 第二步：在页面的底部添加指定的JavaScript代码块，定义`QQMenuPosition`和调用`_QQMenuInt`函数来初始化和运行浮动效果。这个实现对于那些希望提供即时在线支持服务的网站非常有用，它可以帮助提升客户满意度，因为用户无需滚动回页面顶部就能找到客服联系方式。

可浮动可浮动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、在页面的最后面加上

代码如下:

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:层移动时间间隔，越大越慢

/*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;

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38626192

粉丝: 4
资源: 932

浮动QQ在线客服实现代码

浮动QQ,QQ在线客服

右侧浮动QQ在线客服插件有关闭按钮

jquery右侧浮动qq在线客服菜单鼠标滑过展开qq在线客服菜单

动感有趣的jquery浮动QQ在线客服代码

可浮动的在线qq咨询客服代码

jquery带动画特效的浮动QQ在线客服代码

QQ在线浮动客服

浮动QQ客服

qq浮动在线客服可用

动感有趣的jquery浮动QQ在线客服代码.zip

最新资源