最近做网站需要在线QQ悬浮功能,且QQ是通过从数据库获取的集合。
下面例子为静态的QQ list集合。在此感谢 zhaizhai1988 的分享,对原文我做了相应的调整,代码看起来更整齐,而且我上传整个例子,供有需要的朋友下载,下载后直接就可以预览效果。
①js工具类 qqOnline.js
/** * * qqOnline - Sonline * author:selina * **/ (function($) { $.fn.Sonline = function(options) { var opts = $.extend({}, $.fn.Sonline.defualts, options); $.fn.setList(opts); // 调用列表设置 if (opts.DefaultsOpen == false) { $.fn.Sonline.close(opts.Position, 0); } // 展开 $("#SonlineBox > .openTrigger").live("click", function() { $.fn.Sonline.open(opts.Position); }); // 关闭 $("#SonlineBox > .contentBox > .closeTrigger").live("click", function() { $.fn.Sonline.close(opts.Position, "fast"); }); // Ie6兼容或滚动方式显示 if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style || opts.Effect == true) { $.fn.Sonline.scrollType(); } else if (opts.Effect == false) { $("#SonlineBox").css({ position : "fixed" }); } } // plugin defaults $.fn.Sonline.defualts = { Position : "left",// left或right Top : 200,// 顶部距离,默认200px Effect : true, // 滚动或者固定两种方式,布尔值:true或 DefaultsOpen : true, // 默认展开:true,默认收缩:false Qqlist : "" // 多个QQ用','隔开,QQ和客服名用'|'隔开 } // 展开 $.fn.Sonline.open = function(positionType) { var widthValue = $("#SonlineBox > .contentBox").width(); if (positionType == "left") { $("#SonlineBox > .contentBox").animate({ left : 0 }, "fast"); } else if (positionType == "right") { $("#SonlineBox > .contentBox").animate({ right : 0 }, "fast"); } $("#SonlineBox").css({ width : widthValue + 4 }); $("#SonlineBox > .openTrigger").hide(); } // 关闭 $.fn.Sonline.close = function(positionType, speed) { $("#SonlineBox > .openTrigger").show(); var widthValue = $("#SonlineBox > .openTrigger").width(); var allWidth = (-($("#SonlineBox > .contentBox").width()) - 6); if (positionType == "left") { $("#SonlineBox > .contentBox").animate({ left : allWidth }, speed); } else if (positionType == "right") { $("#SonlineBox > .contentBox").animate({ right : allWidth }, speed); } $("#SonlineBox").animate({ width : widthValue }, speed); } // 子插件:设置列表参数 $.fn.setList = function(opts) { $("body") .append( "<div class='SonlineBox' id='SonlineBox' style='top:-600px;'><div class='openTrigger' style='display:none' title='展开'></div><div class='contentBox'><div class='closeTrigger'><img src='icon-open.png' title='关闭' /></div><div class='titleBox'><span>客服中心</span></div><div class='listBox'></div></div></div>"); if (opts.Qqlist == "") { $("#SonlineBox > .contentBox > .listBox").append( "<p style='padding:15px'>暂无在线客服。</p>") } else { var qqListHtml = $.fn.Sonline.splitStr(opts); $("#SonlineBox > .contentBox > .listBox").append(qqListHtml); } if (opts.Position == "left") { $("#SonlineBox").css({ left : 0 }); } else if (opts.Position == "right") { $("#SonlineBox").css({ right : 0 }) } $("#SonlineBox").css({ top : opts.Top }); var allHeights = 0; if ($("#SonlineBox > .contentBox").height() < $( "#SonlineBox > .openTrigger").height()) { allHeights = $("#SonlineBox > .openTrigger").height() + 4; } else { allHeights = $("#SonlineBox > .contentBox").height() + 4; } $("#SonlineBox").height(allHeights); if (opts.Position == "left") { $("#SonlineBox > .openTrigger").css({ left : 0 }); } else if (opts.Position == "right") { $("#SonlineBox > .openTrigger").css({ right : 0 }); } } // 滑动式效果 $.fn.Sonline.scrollType = function() { $("#SonlineBox").css({ position : "absolute" }); var topNum = parseInt($("#SonlineBox").css("top") + ""); $(window).scroll(function() { var scrollTopNum = $(window).scrollTop();// 获取网页被卷去的高 $("#SonlineBox").stop(true, true).delay(0).animate({ top : scrollTopNum + topNum }, "slow"); }); } // 分割QQ $.fn.Sonline.splitStr = function(opts) { var strs = new Array(); // 定义一数组 var QqlistText = opts.Qqlist; strs = QqlistText.split(","); // 字符分割 var QqHtml = "" for ( var i = 0; i < strs.length; i++) { var subStrs = new Array(); // 定义一数组 var subQqlist = strs[i]; subStrs = subQqlist.split("|"); // 字符分割 QqHtml = QqHtml + "<div class='QQList'><span>" + subStrs[1] + ":</span><a target='_blank' href='http://wpa.qq.com/msgrd?v=3&uin=" + subStrs[0] + "&site=qq&menu=yes'><img border='0' src='http://wpa.qq.com/pa?p=2:" + subStrs[0] + ":41 &r=0.22914223582483828' alt='点击这里'></a></div>" } return QqHtml; } })(jQuery);
②css样式 qqOnline.css
.SonlineBox{ width:162px; font-size:12px;overflow:hidden; z-index:9999;} .SonlineBox .openTrigger{ width:30px; height:110px; position:absolute; top:0px; z-index:1; cursor:pointer; background:#0176ba url(icon-close.png) no-repeat;} .SonlineBox .titleBox{ width:158px; height:35px; line-height:35px; background:#038bdc url(icon-bg.png) repeat-x; border-bottom:2px solid #0176ba;} .SonlineBox .titleBox span{ margin-left:10px; color:#fff; font-size:14px; font-family:'微软雅黑','黑体';} .SonlineBox .contentBox{ width:158px; height:auto; border:2px solid #0176ba; background:#fff; position:absolute; z-index:2;} .SonlineBox .contentBox .closeTrigger{ width:25px; height:25px; display:block; cursor:pointer; position:absolute; top:5px;right:5px;-webkit-transition:all 0.8s ease-out;} .SonlineBox .contentBox .closeTrigger:hover{-webkit-transform:scale(1) rotate(360deg);} .SonlineBox .contentBox .listBox{overflow:hidden; margin-bottom:10px;} .SonlineBox .contentBox .listBox .QQList{ display:block; width:86%; height:22px; margin:10px auto 0px auto;} .SonlineBox .contentBox .listBox .QQList span{float:left; line-height:22px;} .SonlineBox .contentBox .listBox .QQList a{float:left;}
③ html页面
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>在线QQ客服悬浮插件</title> <script type="text/javascript" src="jquery-1.6.4.js"></script> <link href="qqOnline.css" rel="stylesheet" type="text/css" id="" media="all"></link> <script type="text/javascript" src="qqOnline.js"></script> <script> $(function(){ $("body").Sonline({ Position:"right",//left或right Top:200,//顶部距离,默认200px Effect:true, //滚动或者固定两种方式,布尔值:true或false DefaultsOpen:true, //默认展开:true,默认收缩:false Qqlist:"418114362|客服a,418114362|客服b,418114362|客服c,418114362|客服d,418114362|客服e" //多个QQ用','隔开,QQ和客服名用'|'隔开 }); }) </script> </head> <body> </body> </html>
相关推荐
标题 "ecshop-QQ微博淘宝支付宝--四合一有后台版-UTF-8" 指的是一个集成QQ、微博、淘宝和支付宝四种社交与支付功能的ECShop商城系统。ECShop是一款基于PHP语言开发的开源电子商务平台,适用于企业或个人快速搭建网上...
"锋的叶子网站QQ在线客服插件-QQ2005美化版"这个标题揭示了我们讨论的核心是一款专为网站设计的QQ在线客服插件,且是基于QQ2005版本进行美化的。这表明该插件可能具有与原版QQ2005不同的视觉设计和用户体验优化,...
新一代后台图色技术,支持DX图形...由于不是所有的绘图模式此插件都能支持后台,所以,如果程序有多种绘图模式请设置成支持的模式(DX图形和GDI图形)。例如QQ三国,显示驱动要设置成D3D模式(即DX图形方式)才能使用。
在线QQ客服悬浮插件是一种网页交互工具,旨在提供无缝的客户支持体验,让用户在浏览网站时可以方便地与客服人员进行即时沟通。该插件设计兼容多种浏览器,包括早期版本的Internet Explorer(ie6、7、8)、谷歌浏览器...
对于那些使用IE6(Internet Explorer 6)浏览器的用户,QQ空间插件是必不可少的工具,因为它可以增强在旧版浏览器上浏览QQ空间的体验。本文将详细探讨QQ空间插件以及与IE6浏览器相关的知识点。 首先,我们需要了解...
腾讯 QQ IM 后台架构的演化与启示是指腾讯QQ即时通讯(IM)后台架构的演化过程和启示,从十万级到亿级在线的整个过程中,吸取了很多教训,对海量服务的理解是长期积累的结果。 演化过程可以分为三个阶段:IM 后台 ...
ECShop是一款知名的开源电子商务平台,主要用于构建B2C类型的在线购物网站。这款PC端第三方登录插件是针对ECShop设计的,旨在为用户提供更加便捷的登录体验,通过整合微信、QQ、微博、淘宝和支付宝这五大社交及支付...
QQ悬浮客服代码是一种常见的网页交互技术,用于在网站上实现一个可以随滚动条移动而始终保持在屏幕某一位置的在线客服窗口。这样的设计旨在提供一种便捷的用户服务方式,让用户在浏览网页时能随时与客服人员进行沟通...
插件功能:。1.内存整理 ---(可降低QQ内存占用 一会就恢复了 没啥鸟用)。2.本地会员 --- (顾名思义)。3.广告去除 --- (你懂的)。4.IP显示--- (发送文件或远程协助可探测)-此功能违规 已去除。5.消息远控 --- ...
**jQuery.Sonline.2.0 在线QQ客服悬浮插件详解** jQuery.Sonline.2.0是一款基于jQuery库开发的在线QQ客服悬浮插件,它主要用于网站中集成QQ客服功能,提供用户与客服人员实时交流的便捷通道。该插件以悬浮窗口的...
重大更新,攻略完善,支持QQ频道!! 温暖的灵魂终将相遇 因为热爱光遇,才能坚持开发这款插件 因为热爱光遇,才能坚持每天更新任务 因为热爱光遇,才能源源不断的输出攻略图 插件介绍:本插件是一款光遇攻略插件...
7. **兼容性与更新**:作为一款成熟的插件,"discuz插件-qq客服"应该与Discuz! 的不同版本有良好的兼容性,并定期更新以适应系统的升级和功能的改进。 从压缩包文件的名称来看,"1.jpg"可能是展示QQ客服插件在论坛...
"页面添加qq悬浮栏目"就是一种常见的方式,它利用JavaScript(JS)代码实现一个在页面右侧悬浮的QQ在线客服图标。这种设计允许用户在浏览网页时随时点击咨询,无需离开当前页面,提高了互动性和便捷性。 首先,我们...
2. 后台键鼠方面,目前插件界功能最齐全,最强悍的后台键鼠 3. 图色方面,高速找图找色,取色 4. 支持MASM Call代码嵌入执行 【功能特点】 文字识别方面 1. 所有文字识别接口都支持后台gdi 后台gdi2 后台dx 后台...
左侧红色js悬浮QQ在线客服插件代码,可随着滚动条滚动,使用非常方便,可自己编辑QQ客服,点击右侧在线客服可伸 缩展开。本款插件代码适合大部分的网站管理系统,如织梦CSM,帝国CSM,电商程序,博客程序,论坛...
JS弹出式QQ在线客服插件是一种常见的网页交互工具,它允许网站访客与客服人员进行实时交流,提高用户体验和客户满意度。此插件适用于多种浏览器,包括Internet Explorer(IE)、Firefox、Chrome以及Safari,这涵盖了...
QQ在线悬浮客服是一种常见的网页交互功能,它允许网站访客通过点击页面上的悬浮图标与客服人员进行实时聊天,提供及时的客户服务。这种功能在电子商务、教育、咨询等众多行业中广泛应用,提高了用户满意度和转化率。...