带微信二维码、点击展开在线客服调用代码

特效描述：jquery页面右侧 固定按钮点击展开 带二维码的 qq在线客服，

代码部署教程

1. 引入CSS

<link href=”css/style.css” rel=”stylesheet” type=”text/css” />

2. 引入JS

<script type=”text/javascript” src=”js/jquery-1.8.3.min.js”></script>

<script type=”text/javascript” src=”js/script.js”></script>

3. HTML代码

<div style=”height:2000px;”></div>
<div class=”main-im”>
<div id=”open_im” class=”open-im”>&nbsp;</div>
<div class=”im_main” id=”im_main”>
<div id=”close_im” class=”close-im”><a href=”javascript:void(0);” title=”点击关闭”>&nbsp;</a></div>
<a href=”http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes” class=”im-qq qq-a” title=”在线QQ客服”>
<div class=”qq-container”></div>
<div class=”qq-hover-c”><img class=”img-qq” src=”images/qq.png”></div>
<span> QQ在线咨询</span>
</a>
<div class=”im-tel”>
<div>售前咨询热线</div>
<div class=”tel-num”>400-123-8888</div>
<div>售后咨询热线</div>
<div class=”tel-num”>021-12345678</div>
</div>
<div class=”im-footer” style=”position:relative”>
<div class=”weixing-container”>
<div class=”weixing-show”>
<div class=”weixing-txt”>微信扫一扫<br>关注第九站长<br>获取更多免费素材</div>
<img class=”weixing-ma” src=”images/weixing-ma.jpg”>
<div class=”weixing-sanjiao”></div>
<div class=”weixing-sanjiao-big”></div>
</div>
</div>
<div class=”go-top”><a href=”javascript:;” title=”返回顶部”></a> </div>
<div style=”clear:both”></div>
</div>
</div>
</div>

下载地址

立即下载