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


Posted in Javascript onOctober 23, 2015

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

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

运行效果截图如下:

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>
<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程序设计有所帮助。

Javascript 相关文章推荐
为jQuery.Treeview添加右键菜单的实现代码
Oct 22 Javascript
读jQuery之二(两种扩展)
Jun 11 Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 Javascript
简单分析javascript中的函数
Sep 10 Javascript
详解Node.Js如何处理post数据
Sep 19 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
jquery实现弹窗功能(窗口居中显示)
Feb 27 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
jQuery 实现扁平式小清新导航
Jul 07 jQuery
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
JS实现超简洁网页title标题跑动闪烁提示效果代码
Oct 23 #Javascript
seajs加载jquery时提示$ is not a function该怎么解决
Oct 23 #Javascript
浅析Node.js 中 Stream API 的使用
Oct 23 #Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 #Javascript
js显示当前日期时间和星期几
Oct 22 #Javascript
js检测用户输入密码强度
Oct 22 #Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
Oct 22 #Javascript
You might like
PHP 字符串操作入门教程
2006/12/06 PHP
php+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
2007/03/07 PHP
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
laravel 解决crontab不执行的问题
2019/10/22 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
传智播客学习之java 反射
2009/11/22 Javascript
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
2012/10/11 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
Javascript 浮点运算的问题分析与解决方法
2013/08/27 Javascript
影响jQuery使用的14个方面
2014/09/01 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
JQuery中Bind()事件用法分析
2015/05/05 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
2017/08/10 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
Python中实现三目运算的方法
2015/06/21 Python
numpy的文件存储.npy .npz 文件详解
2018/07/09 Python
pygame游戏之旅 添加键盘按键的方法
2018/11/20 Python
使用django自带的user做外键的方法
2020/11/30 Python
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
领导干部培训感言
2014/01/23 职场文书
体育系毕业生求职自荐信
2014/04/16 职场文书
音乐教师个人总结
2015/02/06 职场文书
材料员岗位职责范本
2015/04/11 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
python单元测试之pytest的使用
2021/06/07 Python
html粘性页脚的具体使用
2022/01/18 HTML / CSS
Python中的tkinter库简单案例详解
2022/01/22 Python
Redis特殊数据类型Geospatial地理空间
2022/06/01 Redis