下面是详细讲解“jquery实现漂浮在网页右侧的qq在线客服插件示例”的完整攻略。
一、插件的实现过程
创建一个HTML文件，引入jquery文件和插件的css和js文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery实现漂浮在网页右侧的qq在线客服插件示例</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="js/qqFloat.js"></script>
</body>
</html>
在body标签中添加一个div容器。div容器中包含一个h3标题和两个链接，一个是进入在线客服页面的链接，另一个是关闭在线客服的链接。代码如下：
<div id="online_qq">
<h3>在线客服</h3>
<a href="#" class="qq_online"></a>
<a href="#" class="close_qq"></a>
</div>
插件的主要功能是实现一个悬浮在网页右侧的QQ客服按钮。点击按钮后弹出在线客服窗口，点击关闭按钮可以关闭窗口。这个功能需要用到jquery的一些方法，具体实现过程如下：
$(function(){
// 动态插入QQ图标到页面中
var newDiv=document.createElement("div");
newDiv.innerHTML='<a title="在线客服" class="qq_float" href="javascript:void(0)"></a>';
document.body.appendChild(newDiv);
// QQ客服的浮动效果
$(".qq_float").css({"position":"fixed","top":"50%","right":"-42px","margin-top":"-120px","display":"block","z-index":"999999"});
$(".qq_float").animate({right: '0'}, 500);
// 点击QQ客服图标展开在线客服窗口
$(".qq_float").click(function(){
$("#online_qq").animate({right: '0'}, 500);
});
// 点击关闭按钮关闭在线客服窗口
$(".close_qq").click(function(){
$("#online_qq").animate({right: '-150px'}, 500);
});
});
二、示例说明
在js代码中，使用document.createElement()方法动态创建一个div标签，再把div中的html代码赋值给该div，在使用appendChild()方法将这个div插入到body标签中。这种方法可以实现动态添加元素到页面中，非常方便。
var newDiv=document.createElement("div");
newDiv.innerHTML='<a title="在线客服" class="qq_float" href="javascript:void(0)"></a>';
document.body.appendChild(newDiv);
使用jquery的css()方法可以实现对指定元素样式的设定或获取。在这个例子中，我们使用css()方法将原本隐藏到页面外面的QQ客服图标“拉”到页面的可视区域中，并实现一个向右浮动的效果。
$(".qq_float").css({"position":"fixed","top":"50%","right":"-42px","margin-top":"-120px","display":"block","z-index":"999999"});
$(".qq_float").animate({right: '0'}, 500);
以上就是“jquery实现漂浮在网页右侧的qq在线客服插件示例”的完整攻略，希望能够对你有所帮助。
本文链接：http://task.lmcjl.com/news/15742.html