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

2024-09-27 17:25:42

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/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程序设计有所帮助。

jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码

本文实例讲述了jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码.分享给大家供大家参考,具体如下: 这是一个黑色的QQ客服代码,显示在网页右侧,点击后会向左展开QQ客服的完整内容,适用的网站范围广,以前发过不少的在线客服,每一款都风格不同,你可以在网页特效栏目搜索"在线客服"看下有你需要的不. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-right-show-qq-online-kf-codes/ 具体代码如
jQuery实现悬浮在右上角的网页客服效果代码

本文实例讲述了jQuery实现悬浮在右上角的网页客服效果代码.分享给大家供大家参考,具体如下: 这是款网页在线客服代码,应用了jquery插件,兼容性不错.默认状态下,客服只显示一个图片Button,用鼠标点击时展开全部内容,可用作QQ客服,售后客服等,可以作为网站快速通道,方便用户进行相应的操作. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-right-top-wen-online-demo/ 具体代码如下: <!DOCTYP
jQuery实现仿QQ在线客服效果的滚动层代码

本文实例讲述了jQuery实现仿QQ在线客服效果的滚动层代码.分享给大家供大家参考.具体如下: 这是一款jQuery滚动层,可以做成仿QQ在线客服,虽然效果有点生硬,但水平就这么高了,弹出层是挺实用的,期待大家有新的改进. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-qq-online-style-scroll-style-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD
jQuery实现的网页右下角tab样式在线客服效果代码

本文实例讲述了jQuery实现的网页右下角tab样式在线客服效果代码.分享给大家供大家参考,具体如下: 这是一款网页右下角tab样式的在线客服代码,若在火狐或chrome浏览器下,客服是带边框阴影的,IE8下好像没边框效果,整体不如在Chrome.火狐.Opera浏览器下.这款在线客服代码的底部使用了TAB选项卡的样式,鼠标点击可切换客服的内容,还是挺新颖的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-right-buttom
jquery实现漂浮在网页右侧的qq在线客服插件示例

很实用的一款QQ在线客服代码,点击QQ图标,可直接与客服对话.具体实现代码如下: html页面: 复制代码代码如下: <!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/xht
jQuery实现ichat在线客服插件

ichat是一款开源免费在线客服jQuery插件,通过该插件,您可以自由的定制属于自己的在线客服代码. ichat充分吸收传统在线客服插件的优点,并加上自身的独特设计,使得ichat可定制性异常强大. ichat追求简单实用,走小清新路线,以便能够适应大多数网站风格. ichat几乎全部由配置生成,使用简便,不需要写html,但需要写js,因为配置是json对象. ichat体积小巧,代码高效,兼容性良好,采用jQuery插件封装,与原有系统零冲突. 效果预览图: 更多内容参见: ichat项目
jQuery实现的网页左侧在线客服效果代码

本文实例讲述了jQuery实现的网页左侧在线客服效果代码.分享给大家供大家参考,具体如下: 这是又一个网页上的在线客服代码,不错,可以用一下哦.与其它客服不一样的地方呢?无非是在网页左侧滑出,可对客服类型分组,又多了一个功能,哈哈. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-left-online-kf-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
javascript实现在线客服效果

在线客服系统在大量的网站都有应用,特别是销售类网站,可以有效的增加网站的可用性,便于客户及时联系商家,从而增加了交易成功的可能性,在线客服系统的实现方式有多种多样,这里介绍一种网上常见并且非常美观的客服系统,以此达到举一反三的目的,能够比较轻松的实现其他外观形式的客服系统,代码示例如下: CSS <style type="text/css"> body { margin:0px } .main_head { background:url(mytest/JS/img3-5_2
jQuery实现右侧抽屉式在线客服功能

我们先来看下实际运行效果图: 先给大家看下整体代码: <!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> <met
js实现浮动在网页右侧的简洁QQ在线客服代码

本文实例讲述了js实现浮动在网页右侧的简洁QQ在线客服代码.分享给大家供大家参考.具体如下: 这是一个简洁版的QQ在线客服,其实重要的是这个JS函数,只要有了这个JS函数,实际上你完全可以写一个这样的在线客服,它是用JS+CSS去控制层的隐藏与展开.注意代码中的QQ号记着要改一下哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-float-qq-onlinefk-style-codes/ 具体代码如下: <!DOCTYPE html P
腾讯QQ网页在线客服，随网页滚动条上下移动的效果一

该特效需要用到相关的图片,比如那个效果的皮服,请各位自行将相关的图片下载到本地使用. 腾讯QQ网页在线客服,随网页滚动条上下移动的效果一 function picsize(obj,MaxWidth){ img=new Image(); img.src=obj.src; if (img.width>MaxWidth) { return MaxWidth; } else { return img.width; } } function CloseQQ() { divStayTopleft.style

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

相关推荐

随机推荐