网页右侧固定QQ在线客服悬窗代码

网站页面加上一个客服悬窗，相信大家都很熟悉，或是留言板，或是QQ在线交流，用户可以很方便联系到站长，体验还是不错的。这里橘子君给大家分享便是一款网页右侧固定QQ在线客服悬窗代码。

效果预览

文末提供素材，可以先将素材下载下来，里面包含css、js、images三个文件夹，将文件上传到网站空间对应的目录，index.html文件中包含需要使用的代码，建议使用Dreamweaver软件打开index.html文件调试，并将QQ号改成你自己的保存即可。如果你不会使用，小白站长可以参考下面方法。

使用方法

将以下代码放到需要展示QQ悬窗的网页模板<head>与</head>之间，js和css的路径不要弄错就行。

JavaScript

<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和网址换成自己的。

CSS

<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

相关文章：

相关阅读