您的位置：首页 > Web前端 > JQuery

jQuery的简易在线客服

2015-11-06 13:31 561 查看

**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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航