网站的QQ在线客服

最新推荐文章于 2013-11-18 23:34:37 发布

huanghan1988

最新推荐文章于 2013-11-18 23:34:37 发布

阅读量1.2k

点赞数

分类专栏：网站类文章标签： qq function class div menu 咨询

本文链接：https://blog.csdn.net/huanghan1988/article/details/6306261

版权

网站类专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前些时候公司网站搞了个QQ客服，在这mark下

这个是HTML

<div class="QQask" id="QQask"> <div id="QQleftDiv" class="QQleft"> </div> <div id="QQrightDiv" class="QQmain"> <div class="QQhead"> </div> <div class="QQtime"> 咨询时间：08:30-17:30 </div> <div class="QQnum"> <div style="height: 0px;"> </div> <ul> <li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=360090881&site=信迈科技迎您&menu=yes" mce_href="http://wpa.qq.com/msgrd?v=3&uin=360090881&site=信迈科技迎您&menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=2:360090881:41" mce_src="http://wpa.qq.com/pa?p=2:360090881:41" alt="" title=""> 技术咨询</a></li> <li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=360090881&site=信迈科技迎您&menu=yes" mce_href="http://wpa.qq.com/msgrd?v=3&uin=360090881&site=信迈科技迎您&menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=2:360090881:41" mce_src="http://wpa.qq.com/pa?p=2:360090881:41" alt="" title=""> 商务咨询</a></li> <li>咨询电话：0591-88136677</li> </ul> </div> <div class="QQbotm"> </div> </div> </div>

这个是CSS

/*QQ客服*/ .QQask{position:absolute; z-index:20; right:10px; top:150px; width:196px;} .QQleft{ width:26px; height:136px;background:url(../images/qq_1.gif) no-repeat 0 0; float:right; margin-top:10px; } .QQmain{ margin:0 auto; display:none; float:right;} .QQhead{ width:170px; height:34px;background:url(../images/siderIM_title.gif) no-repeat 0 0;} .QQtime{ width:170px; height:34px;background:url(../images/siderIM_infobox.gif) no-repeat 0 0; text-align:center; line-height:34px;} .QQnum{width:168px;background:#fff; text-align:center; border-left:1px solid #AEB3B7; border-right:1px solid #AEB3B7;} .QQnum ul{ margin:0; padding:0; margin-top:10px; } .QQnum ul li{ list-style:none; height:30px; line-height:30px;} .QQbotm{ width:170px; height:9px;background:url(../images/siderIM_bottom.gif) no-repeat 0 0;}

这个是JS

//QQ客服代码 function heartBeat(){ $("#QQleftDiv").hover(function () { $("#QQrightDiv").css({"display":"block"}); $(this).css({"display":"none"}); },function () { //$("#QQrightDiv").css({"display":"none"}); }); $("#QQrightDiv").hover(function () { $(this).css({"display":"block"}); },function () { $(this).css({"display":"none"}); $("#QQleftDiv").css({"display":"block"}); }); var menuYloc = $("#QQask").offset().top; var menuYloc = $("#QQask").offset().top; $(window).scroll(function (){ var offsetTop = menuYloc + $(window).scrollTop() +"px"; $("#QQask").animate({ top: offsetTop }, { duration: 500, queue: false }); $("#video").animate({ top: offsetTop }, { duration: 500, queue: false }); $("#videoshow").animate({ top: offsetTop }, { duration: 500, queue: false }); }); }

JQuery版本是1.4.2的

这里还有个问题，那就是有时候QQ客服非得加好友后才能聊天，能不能不用加好友就能聊天发信息了呢。答案是肯定可以的，具体怎么弄呢？来这看看就知道了。http://wp.qq.com/index.html