网页右侧固定QQ在线客服悬窗代码_生活百科

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

文章插图

文章插图
文末提供素材，可以先将素材下载下来，里面包含css、js、images三个文件夹，将文件上传到网站空间对应的目录， index.html文件中包含需要使用的代码，建议使用Dreamweaver软件打开index.html文件调试，并将QQ号改成你自己的保存即可。如果你不会使用，小白站长可以参考下面方法。
使用方法
将以下代码放到需要展示QQ悬窗的网页模板<head>与</head>之间， js和css的路径不要弄错就行。
【网页右侧固定QQ在线客服悬窗代码】<link rel="stylesheet" type="text/css" href="https://www.yf-zs.com/shuma/css/style.css" /><script type="text/javascript" src="http://img.caodingbaike.com/220901/15095H1Q-2.jpg"></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