最近做网站需要在线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在线客服插件-QQ2005美化版
1.4亿在线背后的故事-——-腾讯-QQ-IM后台架构的演化与启示.ppt
新一代后台图色技术,支持DX图形...由于不是所有的绘图模式此插件都能支持后台,所以,如果程序有多种绘图模式请设置成支持的模式(DX图形和GDI图形)。例如QQ三国,显示驱动要设置成D3D模式(即DX图形方式)才能使用。
QQ空间插件-IE6专用
在线QQ客服悬浮插件,兼容:ie6、7、8、谷歌、火狐、360等各大主流浏览器
插件功能:。1.内存整理 ---(可降低QQ内存占用 一会就恢复了 没啥鸟用)。2.本地会员 --- (顾名思义)。3.广告去除 --- (你懂的)。4.IP显示--- (发送文件或远程协助可探测)-此功能违规 已去除。5.消息远控 --- ...
1.4亿在线背后的故事-——-腾讯-QQ-IM后台架构的演化与启示.pdf
重大更新,攻略完善,支持QQ频道!! 温暖的灵魂终将相遇 因为热爱光遇,才能坚持开发这款插件 因为热爱光遇,才能坚持每天更新任务 因为热爱光遇,才能源源不断的输出攻略图 插件介绍:本插件是一款光遇攻略插件...
ECShop pc端第三方登录插件,重要的是实现了微信扫码登录!!!需要微信登录的可以拿走。其他还有QQ,微博等等
2. 后台键鼠方面,目前插件界功能最齐全,最强悍的后台键鼠 3. 图色方面,高速找图找色,取色 4. 支持MASM Call代码嵌入执行 【功能特点】 文字识别方面 1. 所有文字识别接口都支持后台gdi 后台gdi2 后台dx 后台...
左侧红色js悬浮QQ在线客服插件代码,可随着滚动条滚动,使用非常方便,可自己编辑QQ客服,点击右侧在线客服可伸 缩展开。本款插件代码适合大部分的网站管理系统,如织梦CSM,帝国CSM,电商程序,博客程序,论坛...
jquery.Sonline.2.0在线QQ客服悬浮插件
实现了基本的QQ后台管理功能,代码清晰明了,附加了数据库
QQ悬浮客服代码 插件 绝对有用,经本人测试多次绝对有用
七喜在线QQ客服插件 七喜在线QQ客服插件有10种风格提供选择,后台地址/admin.asp,密码admin,登陆后自行编辑在线客服以及软件风格样式 ,编辑完以后将 admin.asp 打包然后删除,防止被入侵。 七喜在线QQ客服...
网页右侧QQ在线客服悬浮JS代码 <link href="qq/Qq981389008.css" rel="stylesheet" type="text/css" /> <script language="JavaScript" type="text/javascript" src="qq/pubcenter.js"></script>
价值50元的qq客服插件,discuz插件-qq客服