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 相关文章推荐
phpwind放自动注册方法
Dec 02 Javascript
JS网络游戏-(模拟城市webgame)提供的一些例子下载
Oct 14 Javascript
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
jquery 选择器引擎sizzle浅析
Feb 06 Javascript
鼠标经过显示二级菜单js特效
Aug 13 Javascript
JS JSON对象转为字符串的简单实现方法
Nov 18 Javascript
js防止页面被iframe调用的方法
Oct 30 Javascript
javascript实现平滑无缝滚动
Aug 09 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 Javascript
微信小程序的部署方法步骤
Sep 04 Javascript
vue 使用post/get 下载导出文件操作
Aug 07 Javascript
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脚本[带参数]的方法
2010/01/22 PHP
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
Yii1.1中通过Sql查询进行的分页操作方法
2017/03/16 PHP
thinkphp实现附件上传功能
2017/05/26 PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
2018/08/16 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
在网页中屏蔽快捷键
2006/09/06 Javascript
jquery isType() 类型判断代码
2011/02/14 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
Node.js中调用mysql存储过程示例
2014/12/20 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
详解JavaScript for循环中发送AJAX请求问题
2020/06/23 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
jquery的$().each和$.each的区别
2019/01/18 jQuery
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
python执行子进程实现进程间通信的方法
2015/06/02 Python
python数组过滤实现方法
2015/07/27 Python
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
Python中正则表达式详解
2017/05/17 Python
Python实现Smtplib发送带有各种附件的邮件实例
2017/06/05 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
详解Python循环作用域与闭包
2019/03/21 Python
Django框架models使用group by详解
2020/03/11 Python
世界上最大的街头服饰网站:Karmaloop
2017/02/04 全球购物
C++面试题目
2013/06/25 面试题
乳制品整治工作方案
2014/05/29 职场文书
我爱我班主题班会
2015/08/13 职场文书