jQuery实现的网页左侧在线客服效果代码

2019-11-20 11:25:29

字体：大中小

来源：转载

供稿：网友

本文实例讲述了jQuery实现的网页左侧在线客服效果代码。分享给大家供大家参考，具体如下：

这是又一个网页上的在线客服代码，不错，可以用一下哦。与其它客服不一样的地方呢？无非是在网页左侧滑出，可对客服类型分组，又多了一个功能，哈哈。

运行效果截图如下：

在线演示地址如下：

http://demo.VeVB.COm/js/2015/jquery-left-online-kf-demo/

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>网页左侧浮动jquery在线QQ客服代码</title><style>*{margin:0px;padding:0px;outline:none;list-style-type:none;border:none;}/* QQbox */.QQbox{z-index:1000;width:410px;left:-276px;top:0;margin:149px 0 0 0;position:fixed;}*html, *html body{background-image:url(about:blank);background-attachment:fixed;}*html .QQbox{position:absolute;top:expression(eval(document.documentElement.scrollTop));}.QQbox .press{left:0;border:none;cursor:pointer;width:32px;height:96px;position:absolute;padding-top:140px;}.QQbox .Qlist{float:left;width:410px;background:url(images/bj01.png) no-repeat;background-position:1px 0px;height:436px;display:block;overflow:hidden;zoom:1;}.QQbox .Qlist .infobox{text-align:center;background-repeat:no-repeat;padding:5px;line-height:14px;color:#CCCCCC;font-weight:700;}.QQbox .Qlist .con{margin-top:266px;margin-left:50px;color:#32567e;font-size:14px;}.QQbox .Qlist .con ul li{height:31px;list-style:none;margin-left:35px;}.QQbox .Qlist .con ul li a{font-size:13px;margin-left:18px;text-decoration:none;}.OnlineLeft{float:left;display:inline;width:262px;height:439px;overflow:hidden;zoom:1;}.OnlineBtn{float:right;display:inline;width:127px;height:36px;background:url(images/bj02.png) no-repeat;margin-top:-45px;margin-left:220px;}</style><script type="text/javascript" src="jquery-1.6.2.min.js"></script></head><body><div id="divQQbox" class="QQbox"> <div id="divOnline" class="Qlist">  <div class="OnlineLeft">   <div class="con">    <ul>     <li>售前咨询<a target="_blank" href="tencent://message/?uin=12345678&&Site=www.cdn.net&&Menu=yes"><img      border="0" src="http://wpa.qq.com/pa?p=1:12345678:42"></a></li>     <li>网站建设<a target="_blank" href="tencent://message/?uin=12345678&&Site=www.cdn.net&&Menu=yes"><img      border="0" src="http://wpa.qq.com/pa?p=1:12345678:42"></a></li>     <li>网站优化<a target="_blank" href="tencent://message/?uin=12345678&&Site=www.cdn.net&&Menu=yes"><img      border="0" src="http://wpa.qq.com/pa?p=1:12345678:42"></a></li>     <li>整合营销<a target="_blank" href="tencent://message/?uin=12345678&&Site=www.cdn.net&&Menu=yes"><img      border="0" src="http://wpa.qq.com/pa?p=1:12345678:42"></a></li>     <li>售后服务<a target="_blank" href="tencent://message/?uin=12345678&&Site=www.cdn.net&&Menu=yes"><img      border="0" src="http://wpa.qq.com/pa?p=1:12345678:42"></a></li>    </ul>   </div>  </div>  <div class="OnlineBtn">  </div> </div></div><script type="text/javascript">$(function(){ //建站热线展开效果 $("#divQQbox").hover(  function(){   $(this).stop(true,false);   $(this).animate({left:0},300);   },  function(){   $(this).animate({left:-276},149);   } )});</script></body></html>

希望本文所述对大家jQuery程序设计有所帮助。

上一篇：js计算文本框输入的字符数

下一篇：JS实现超简洁网页title标题跑动闪烁提示效果代码