jquery实现漂浮在网页右侧的qq在线客服插件示例-前端开发

下面是详细讲解“jquery实现漂浮在网页右侧的qq在线客服插件示例”的完整攻略。

下面是详细讲解“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>

编写html代码

在body标签中添加一个div容器。div容器中包含一个h3标题和两个链接，一个是进入在线客服页面的链接，另一个是关闭在线客服的链接。代码如下：

<div id="online_qq">
    <h3>在线客服</h3>
    <a href="#" class="qq_online"></a>
    <a href="#" class="close_qq"></a>
</div>

编写js代码

插件的主要功能是实现一个悬浮在网页右侧的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);
    });

});

二、示例说明

动态插入QQ图标到页面中

在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);

使用css样式设置QQ客服的浮动效果

使用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在线客服插件示例”的完整攻略，希望能够对你有所帮助。

基础教程推荐