精灵采集器
首页
产品功能
购买价格
建站教程
当前位置 :
可视化教程
>
正文
可视化网页制作软件如何给网站添加QQ在线客服

        QQ客服在很多网站都很普通,它可以很方便的让浏览我们网站的用户通过QQ进行交流,不需要去查找QQ再加好友,只需要点一下QQ客服上的图标就可以直接发信息了。

        通过自己写网站HTML代码的方法来给网站添加QQ客服,也就是这节课要讲的内容。

先看下制作好的在线QQ客服效果图:

        怎么给自己的网站添加这款比较漂亮的QQ客服呢,方法如下:

        将下载QQ的JS文件和背景图片文件夹,上传到自己网站空间的根目录下,同时设置H5设计精灵的"站点" > "资源文件路径"为网站空间目录。qq客服JS文件下载:QQ客服

复制以下的CSS代码放到H5设计精灵的页面CSS代码中,用来控制QQ客服的样式和背景。

.qq{width:120px;}<br>.qq_t{width:120px;}<br>.qq_d{width:120px;}<br>.qq_bg{width:130px; background:url(/qqimages/qq03.png) repeat-y; padding:10px 0px 10px; overflow:hidden;}<br>.qq_bg ul{margin:0px; padding:0px;}<br>.qq_bg li{width:90px; height:26px; float:left; margin-left:20px; text-align:left; line-height:26px; background:url(/qqimages/qq04.png) no-repeat; display:inline; margin-bottom:5px;}<br>.qq_bg li a{color:#333;font-size:12px;text-decoration: none;}<br>.qq_bg li a:hover{color:#FF0000; text-decoration: underline; font-size:12px;}<br>.qq_bg li img{margin-top:4px; float:left; margin-left:10px; margin-right:5px;}


复制以下的JS代码放到H5设计精灵的页面JS代码中,用来控制QQ客服窗口的显示。

document.write("<div id=QQFloat style=Z-INDEX:20;LEFT:88%;VISIBILITY:visible;WIDTH:112px;POSITION:absolute;TOP:400px;HEIGHT:300px;>")<br>document.write("<div class=qq><div class=qq_t><img src=qqimages/qq01.png /></div><div class=qq_bg><ul>")<br>document.write("<li><img SRC=qqimages/qq.gif  border=0 align=absmiddle /><a target=_blank href='http://wpa.qq.com/msgrd?v=3&uin=12345689&site=qq&menu=yes'><font color='#000000'>业务咨询</font></a></li>")<br>document.write("<li><img SRC=qqimages/qq.gif  border=0 align=absmiddle /><a target=_blank href='http://wpa.qq.com/msgrd?v=3&uin=23568969&site=qq&menu=yes'><font color='#000000'>业务咨询</font></a></li>")<br>document.write("<li><img SRC=qqimages/qq.gif  border=0 align=absmiddle /><a target=_blank href='http://wpa.qq.com/msgrd?v=3&uin=23568969&site=qq&menu=yes'><font color='#000000'>业务咨询</font></a></li>")<br>document.write("<li><img SRC=qqimages/qq.gif  border=0 align=absmiddle /><a target=_blank href='http://wpa.qq.com/msgrd?v=3&uin=5465648989&site=qq&menu=yes'><font color='#000000'>售后服务</font></a>")<br>document.write("<li><img SRC=qqimages/qq.gif  border=0 align=absmiddle /><a target=_blank href='http://wpa.qq.com/msgrd?v=3&uin=5465648989&site=qq&menu=yes'><font color='#000000'>售后服务</font></a>")<br>document.write("<li><img SRC=qqimages/qq.gif  border=0 align=absmiddle /><a target=_blank href='http://wpa.qq.com/msgrd?v=3&uin=5465648989&site=qq&menu=yes'><font color='#000000'>售后服务</font></a>")<br>document.write("</ul></div><div class=qq_d><img src=qqimages/qq02.png /></div></div>")<br>document.write("</div>")<br>var tips; var theTop = 200<br>var old = theTop;<br>function initFloatTips() {<br>  tips = document.getElementById('QQFloat');<br>  moveTips();<br>};<br>function moveTips() {<br>  var tt=50;<br>  if (window.innerHeight) {<br>    pos = window.pageYOffset<br>  }<br>  else if (document.documentElement && document.documentElement.scrollTop) {<br>    pos = document.documentElement.scrollTop<br>  }<br>  else if (document.body) {<br>    pos = document.body.scrollTop;<br>  }<br><br>  pos=pos-tips.offsetTop+theTop;<br>  pos=tips.offsetTop+pos/10;<br>	<br>  if (pos < theTop) pos = theTop;<br>  if (pos != old) {<br>    tips.style.top = pos+"px";<br>    tt=10;<br>  }	<br>  old = pos;<br>  setTimeout(moveTips,tt);<br>}<br>initFloatTips();

姓名:
评论

vvv

2020-12-05 11:12:36

dd

©2018-2020 h5spirit.cn  | 京ICP备19057243号-1 | QQ群:694364182