网站页面加上一个客服悬窗，相信大家都很熟悉，或是留言板，或是QQ在线交流，用户可以很方便联系到站长，体验还是不错的。这里橘子君给大家分享便是一款网页右侧固定QQ在线客服悬窗代码。
效果预览
文末提供素材，可以先将素材下载下来，里面包含css、js、images三个文件夹，将文件上传到网站空间对应的目录，index.html文件中包含需要使用的代码，建议使用Dreamweaver软件打开index.html文件调试，并将QQ号改成你自己的保存即可。如果你不会使用，小白站长可以参考下面方法。
使用方法
将以下代码放到需要展示QQ悬窗的网页模板<head>与</head>之间，js和css的路径不要弄错就行。
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript">
$(function() {
$(".kfleft").click(function(){
var i=$("#haiiskefu").css("right");
if (i=='0px'){
$('#haiiskefu').animate({right:-80}, 200);
} else {
$('#haiiskefu').animate({right:0}, 200);
}
});
});
</script>
然后在<body>和</body>之间添加以下代码，将QQ和网址换成自己的。
<div id="haiiskefu"> <div class="kfleft" title="点击查看联系方式"></div> <ul> <li><a rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&uin=546541225&site=qq&menu=yes" title="销售咨询" target="_blank"></a></li> <li><a rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&uin=546541225&site=qq&menu=yes" title="美工咨询" target="_blank"></a></li> <li><a rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&uin=546541225&site=qq&menu=yes" title="技术咨询" target="_blank"></a></li> <li><a rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&uin=546541225&site=qq&menu=yes" title="优化咨询" target="_blank"></a></li> <li><a rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&uin=546541225&site=qq&menu=yes" title="售后咨询" target="_blank"></a></li> <li><a rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&uin=546541225&site=qq&menu=yes" title="财务咨询" target="_blank"></a></li> <li><a href="https://www.juzihuang.com/" title="联系方式" target="_blank"></a></li> </ul> </div>
注意事项
主要是css、js、images这三个文件夹里面的文件上传到空间后要记下其路径，路径错了将无法在网页展示QQ在线客服悬窗。
网盘下载提取码：bqnk