HTML/JSP在线QQ客服实现

需积分: 9 72 浏览量更新于2024-09-09 收藏 10KB TXT 举报

"该网页特效是用于实现在线QQ客服功能的代码片段，适用于jsp页面。用户可以直接将这段代码插入到HTML或JSP页面中，以展示一个可点击的QQ图标，当用户点击后会弹出客服对话框。样式表部分定义了QQ图标的样式和客服对话框的显示效果，而JavaScript函数则负责处理点击事件和交互逻辑。" 在这个网页特效中，主要涉及以下几个技术点： 1. **HTML结构**：HTML代码提供了基础的页面结构，包括`<html>`、`<head>`和`<body>`等元素。`<title>`标签用于设置页面标题，而`<style>`标签内包含了CSS样式，`<script>`标签则包含JavaScript代码。 2. **CSS样式**：CSS用于定义网页元素的外观和布局。例如，`#qq_icon`选择器定义了QQ图标的大小、背景图片以及位置，`#cs_online`选择器定义了客服对话框的尺寸、位置和透明度效果。此外，`.qq_context`和`.qq_contextli`等类选择器分别用于定义客服列表的样式。 3. **JavaScript事件处理**：JavaScript代码中的`myEvent`函数是一个跨浏览器的事件绑定函数，它允许在不同浏览器环境下为元素添加事件监听器。`attachEvent`是IE浏览器特有的事件处理方式，而`addEventListener`是W3C标准的方法，此函数确保在两种环境下都能正确执行事件监听。 4. **图片资源**：背景图片如`qq_icon.png`和`qq_bg.png`用于创建QQ图标和客服对话框的视觉效果。这些图片路径被用在CSS中，以实现特定的样式。 5. **固定定位（Position: fixed）**：CSS的`position: fixed`属性使得QQ图标和客服对话框相对于浏览器窗口固定，即使滚动页面也不会移动，保持在屏幕的特定位置。 6. **透明度控制**：使用`filter: alpha(opacity:0)`和`opacity: 0`来设置客服对话框初始时的透明效果，当触发点击事件后，通过JavaScript更改这些属性值，可以实现对话框的淡入淡出动画。 7. **交互逻辑**：虽然代码没有提供完整的JavaScript实现，但可以看出，当用户点击QQ图标时，会触发一个事件，这个事件可能用于显示或隐藏客服对话框，以及可能的其他交互功能，如打开新的聊天窗口或跳转至QQ聊天界面。这个网页特效利用HTML、CSS和JavaScript实现了在网页上添加在线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>网页右侧QQ悬浮滚动在线客服</title>
<style>
/*开发制作，Jason.Leung, QQ,147430218*/
#qq_icon {width:187px; height:193px; background:url(/jscss/demoimg/201404/qq_icon.png) no-repeat; position:fixed; right:-200px; top:150px; cursor:pointer;}
#cs_online {width:217px; height:324px; position:fixed; top:150px; right:-220px; background:url(/jscss/demoimg/201404/qq_bg.png) no-repeat; display:none; filter:alpha(opacity:0); opacity:0;}
.qq_context {width:185px; height:244px; margin-top:73px; margin-left:24px; list-style:none; padding:0px;}
.qq_context li {width:175px; height:25px; margin-left:5px; margin-top:20px; float:left;}
.span_t {display:block; float:left; color:#333; line-height:25px; font-size:12px; font-family:'Arial';}
</style>
<script type="text/javascript">
function myEvent(obj,ev,fn){
if (obj.attachEvent){
obj.attachEvent('on'+ev,fn);
}else{
obj.addEventListener(ev,fn,false);
};
};
function getbyClass(id,sClass){
var oParent = document.getElementById(id);
var all = oParent.getElementsByTagName('*');
var array = [];
for (var i=0; i<all.length; i++){
if (all[i].className == sClass){
array.push(all[i]);
};
};
return array;