在线QQ悬浮插件

最新推荐文章于 2021-11-06 10:14:33 发布

Mydwr

最新推荐文章于 2021-11-06 10:14:33 发布

阅读量2k

点赞数

分类专栏： css js html

html 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

http://vipshow.iteye.com/blog/1861281

http://jingyan.baidu.com/article/6181c3e0482621152ef153da.html

最近做网站需要在线QQ悬浮功能，且QQ是通过从数据库获取的集合。

下面例子为静态的QQ list集合。在此感谢 zhaizhai1988 的分享，对原文我做了相应的调整，代码看起来更整齐，而且我上传整个例子，供有需要的朋友下载，下载后直接就可以预览效果。

①js工具类 qqOnline.js

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

Html代码

.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页面

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>

Mydwr

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
在线QQ悬浮插件

http://vipshow.iteye.com/blog/1861281http://jingyan.baidu.com/article/6181c3e0482621152ef153da.html最近做网站需要在线QQ悬浮功能，且QQ是通过从数据库获取的集合。下面例子为静态的QQ list集合。在此感谢 zhaizhai1988 的分享，对原文我做了相应的调整，代
复制链接

扫一扫

专栏目录