js悬浮QQ在线客服代码(支持拖动)资源-CSDN下载

共14个文件

gif：4个

js：2个

xml：1个

需积分: 10 130 浏览量 2014-02-18 10:29:20 上传评论收藏 14KB RAR 举报

【JavaScript悬浮QQ在线客服代码详解】在网页设计中，为了提供更好的用户体验和便捷的客户服务，许多网站会采用JavaScript实现一种悬浮式的QQ在线客服功能。这种功能允许用户在浏览页面时随时与客服人员进行交流，无需离开当前页面。本文将详细探讨如何使用JavaScript实现一个支持拖动的QQ在线客服代码。我们需要理解JavaScript的基本概念。JavaScript是一种脚本语言，主要用于客户端的网页动态效果处理。在本例中，我们主要利用JavaScript的事件监听、DOM操作以及CSS样式控制来实现QQ客服窗口的悬浮和拖动功能。 1. **创建客服窗口元素**：我们需要在HTML中创建一个包含QQ号码和客服图标等信息的div元素。这个元素将是悬浮客服窗口的基础，可以通过CSS设置其样式，如位置、大小、背景图片等。 ```html <div id="qq-online" style="position:fixed; bottom:20px; right:20px;"> <a href="tencent://message/?uin=YOUR_QQ_NUMBER&site=website&menu=yes"> <img src="qq_icon.png" alt="在线客服"> </a> </div> ``` 其中`YOUR_QQ_NUMBER`替换为实际的QQ号码，`qq_icon.png`是客服图标。 2. **添加拖动功能**：为了让客服窗口可拖动，我们需要监听鼠标的mousedown、mousemove和mouseup事件。在mousedown事件中记录初始鼠标位置，在mousemove事件中计算移动距离并更新客服窗口的位置，最后在mouseup事件中解除移动。 ```javascript var isDragging = false; var dragOffset = { x: 0, y: 0 }; document.getElementById('qq-online').addEventListener('mousedown', function(e) { isDragging = true; dragOffset.x = e.clientX - this.offsetLeft; dragOffset.y = e.clientY - this.offsetTop; }); document.addEventListener('mousemove', function(e) { if (isDragging) { var newX = e.clientX - dragOffset.x; var newY = e.clientY - dragOffset.y; document.getElementById('qq-online').style.left = newX + 'px'; document.getElementById('qq-online').style.top = newY + 'px'; } }); document.addEventListener('mouseup', function() { isDragging = false; }); ``` 3. **支持上下滑动**：为了让客服窗口随着页面滚动而始终保持在屏幕底部，我们需要监听window的scroll事件，并根据滚动距离调整客服窗口的位置。 ```javascript window.addEventListener('scroll', function() { var QQonline = document.getElementById('qq-online'); QQonline.style.bottom = (window.innerHeight - QQonline.offsetHeight - window.scrollY) + 'px'; }); ``` 这将确保即使页面滚动，客服窗口始终位于视口的底部。总结，通过以上步骤，我们已经创建了一个支持拖动和上下滑动的JavaScript悬浮QQ在线客服代码。这个功能不仅可以提高网站的用户交互性，还可以提升客户满意度。在实际应用中，可以进一步优化代码，例如添加防抖动处理，防止频繁滚动时对性能的影响，或者添加自定义样式以适应不同的网站设计。同时，要确保遵循网页无障碍（Web Accessibility）原则，让所有用户都能方便地使用这项功能。

资源推荐

资源详情

资源评论

收起资源包目录

onlineQQ.rar （14个子文件）

onlineQQ

.project 1KB

.mymetadata 297B

src

WebRoot

WEB-INF

classes

lib

web.xml 371B

index.html 2KB

images

up_001.gif 2KB

bot_001.gif 2KB

mid001.gif 211B

list_001.gif 679B

online.js 4KB

META-INF

MANIFEST.MF 36B

lrkf.js 6KB

index2.jsp 6KB

.myeclipse

.settings

org.eclipse.core.resources.prefs 157B

.classpath 362B

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js悬浮QQ在线客服代码(支持拖动)</title> <meta name="description" content="js浮动层特效制作悬浮在线客服代码，放置在线QQ等聊天按钮的在线客服浮动层代码，支持拖动效果，可随意在页面上拖动位置，随着浏览器滚动始终保持在悬浮在页面上的js代码。" /> </head> <body> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} /* KeFuDiv */ .KeFuDiv{position:absolute;height:160px;width:118px;} .KeFuList{background:url(images/mid001.gif);} .KeFuTitle{background:url(images/list_001.gif);margin-left:9px;font-size:12px;width:101px;height:20px;line-height:20px;text-align:center;} .KeFuItem{text-align:center;margin-top:8px;font-size:12px;} </style> <div style="height:1000px;"></div> <div id="KeFuDiv" class="KeFuDiv"> <div> <img src="images/up_001.gif" height="55" border="0" usemap="#Map" style="cursor:move;" onmousedown="MoveDiv(KeFuDiv,event);" title="拖动" /> <map name="Map" id="Map"> <area shape="circle" coords="105,10,8" href="javascript:" onclick="KeFuDiv.style.display='none';" title="关闭"/> </map> </div> <div class="KeFuList"> <div class="KeFuTitle">会员客服</div> <div class="KeFuItem"> <a target="_blank" href="tencent://message/?uin=670872334&Site=&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:670872334:3" alt="有事点这里"></a> </div> <div class="KeFuItem"> <a target="_blank" href="tencent://message/?uin=670872334&Site=&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:670872334:2" alt="有事点这里"></a> </div> </div> <div><img src="images/bot_001.gif" border="0"></div> </div> <script type="text/javascript" src="js/online.js"></script> <script type="text/javascript"> //初始位置 gID("KeFuDiv").style.top = (document.documentElement.clientHeight - gID("KeFuDiv").offsetHeight)/2 +"px"; gID("KeFuDiv").style.left = document.documentElement.clientWidth - gID("KeFuDiv").offsetWidth +"px"; //开始滚动 ScrollDiv('KeFuDiv'); </script> </body> </html>

评论收藏

内容反馈