jQuery的简易在线客服

最新推荐文章于 2022-12-07 14:58:52 发布

含笑一过

最新推荐文章于 2022-12-07 14:58:52 发布

阅读量1.2k

点赞数

分类专栏：前端文章标签：在线客服

本文链接：https://blog.csdn.net/u013630488/article/details/49681849

版权

前端专栏收录该内容

51 篇文章 0 订阅

订阅专栏

                                        **jQuery的简易在线客服**

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的简易在线客服</title>
    <script type="text/javascript" src="jquery-1.9.1.js"></script>
    <style type="text/css">
    body{margin: 0;padding: 0;height:15000px;}
    .kefu{position:fixed; top: 250px; right: 0px;  z-index: 9999; _position:absolute; height:152px;width:112px;background-size: 112px 152px; cursor:pointer;}
    .kefu_zk{ position:fixed; top: 250px; right: -30px;z-index: 9999; _position:absolute; cursor:pointer;}
    .kefu_close{ position:absolute; right:0; top:-10px; width:20px; height:20px; z-index:99999; cursor:pointer;}
    .kefu_close img{ width:100%; height:auto;}
    </style>
</head>
<body>
    <div class="kefu" title="在线客服">
        <a href="">
            <img src="kefu.png" alt="客服头像" />
        </a>
        <div class="kefu_close"><img src="kefu_close.png" alt="关闭" /></div>
    </div>
    <div class="kefu_zk"><img src="kefu_zk.png" alt="展开" /></div>
<script>
$(function(){
    $('.kefu_close').click(function(){
        $('.kefu').animate({right:'-112px'},function(){
            $('.kefu_zk').animate({right:'0px'});
        }); 
    });
    $('.kefu_zk').click(function(){
        $('.kefu_zk').animate({right:'-30px'},function(){
            $('.kefu').animate({right:'0px'});
        }); 
    });
});
</script>
</body>
</html>

效果图：
展开状态
这里写图片描述
收起状态

源码下载地址：http://pan.baidu.com/s/1eQfQPfs

含笑一过

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery的简易在线客服

**jQuery的简易在线客服**代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery的简易在线客服</title> <script type="text/javascript" src="jquery-1.9.1.js"></script> <style
复制链接

扫一扫