<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标滑过弹出jquery在线客服</title>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

</head>
<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "宋体";}
/* suspend */
.suspend{width:40px;height:198px;position:fixed;top:200px;right:0;overflow:hidden;z-index:9999;}
.suspend dl{width:120px;height:198px;border-radius:25px 0 0 25px;padding-left:40px;box-shadow:0 0 5px #e4e8ec;}
.suspend dl dt{width:40px;height:198px;background:url(images/suspend.png);position:absolute;top:0;left:0;cursor:pointer;}
.suspend dl dd.suspendQQ{width:120px;height:85px;background:#ffffff;}
.suspend dl dd.suspendQQ a{width:120px;height:85px;display:block;background:url(images/suspend.png) -40px 0;overflow:hidden;}
.suspend dl dd.suspendTel{width:120px;height:112px;background:#ffffff;border-top:1px solid #e4e8ec;}
.suspend dl dd.suspendTel a{width:120px;height:112px;display:block;background:url(images/suspend.png) -40px -86px;overflow:hidden;}
* html .suspend{position:absolute;left:expression(eval(document.documentElement.scrollRight));top:expression(eval(document.documentElement.scrollTop+200))}
</style>

<div class="suspend">
<dl>
<dt class="IE6PNG"></dt>
<dd class="suspendQQ"><a href="http://shang.qq.com/wpa/qunwpa?idkey=cb91b633f1db596a948828f4f333dbb7394ceda014c958cf" target="_blank"></a></dd>
<dd class="suspendTel"><a href="javascript:void(0);"></a></dd>
</dl>
</div>

<script type="text/javascript">
$(document).ready(function(){

$(".suspend").mouseover(function() {
$(this).stop();
$(this).animate({width: 160}, 400);
})

$(".suspend").mouseout(function() {
$(this).stop();
$(this).animate({width: 40}, 400);
});

});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>

图片：

鼠标滑过弹出jquery在线客服的更多相关文章

  1. 简单方便的在线客服展示插件 jQuery.onServ

    onServ jQuery.onServ 是一款简单方便的在线客服jQuery 插件,可以使任意html实现弹出展示在线客服效果, 可以自定义内容,简单配置出多个弹出动作特效,设置位置和样式. git ...

  2. 基于jQuery鼠标点击弹出登陆框效果

    基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <input type=" ...

  3. 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效

    基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...

  4. 工作当中实际运用（3）——js原生实现鼠标点击弹出div层 在点击隐藏

    function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display==& ...

  5. ichat在线客服jQuery插件(可能是历史上最灵活的)

    ichat是一款开源免费在线客服jQuery插件,通过该插件,您可以自由的定制属于自己的在线客服代码. ichat充分吸收传统在线客服插件的优点,并加上自身的独特设计,使得ichat可定制性异常强大. ...

  6. 联想E440问题：点击鼠标时，弹出“无法连接synaptics定点装置驱动程序”错误

    笔记本:Levono E440   问题描述: 在控制面板中,点击鼠标时,弹出“无法连接synaptics定点装置驱动程序”错误,如何解决? 即使在安装联想的驱动后,也没办法解决   解决步骤: 1. ...

  7. 栈的压入、弹出顺序 牛客网 剑指Offer

    栈的压入.弹出顺序 牛客网 剑指Offer 题目描述 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否可能为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是 ...

  8. .net core 和 WPF 开发升讯威在线客服与营销系统：背景和产品介绍

    本系列文章详细介绍使用 .net core 和 WPF 开发 升讯威在线客服与营销系统 的过程.本产品已经成熟稳定并投入商用. 在线演示环境:https://kf-m.shengxunwei.com ...

  9. .net core 和 WPF 开发升讯威在线客服与营销系统：系统总体架构

    本系列文章详细介绍使用 .net core 和 WPF 开发 升讯威在线客服与营销系统 的过程.本产品已经成熟稳定并投入商用. 在线演示环境:https://kf.shengxunwei.com 注意 ...

随机推荐

  1. NSString（或者说是UILabel）加入 “行间距” 之后的 “高度”计算

    一.首先,写一个工具类(NSString的分类,增加两个功能,计算高度宽度) #import "NSString+Extension.h" @implementation NSSt ...

  2. Web性能API——帮你分析Web前端性能

    前端性能统计必备api,有不知道的吗? 正文从这开始- 开发一个现代化的互联网网站是一项复杂的任务,需要各种职能的密切合作以应对用户日新月异的需求.其中,网页的性能直接决定了用户的体验,而随着新型客户 ...

  3. wpa supplicant 移植

    最近移植wifi,WIFI芯片使用rtl8723.在文件系统生成了设备节点.需要移植工具进行测试: iwconfig:没有密码的或者wep加密的wifi,使用iwconfig就已经够用. wpa_su ...

  4. [原创]java WEB学习笔记95：Hibernate 目录

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  5. tp生成验证码

    视图层: <input type="text" name="code" value="" />        <img o ...

  6. flexigrid扩展（添加全选，格式化表单）

    1.关于flexigrid的属性这里不多说,百度一大把. 这里主要说一个参数process process参数:编写对某一列进行自定义处理的函数 function 方法名(tddiv,pid){}// ...

  7. Eclipse创建maven的Web项目

    MAVEN作用:管理jar包 1.首先新建一个maven项目,看图: 2.按照以上步骤就可以创建一个maven项目,可以看到最下图的目录结构,但是这样的目录结构是不对的,需要做一些修改. 首先为了避免 ...

  8. WEB三层架构与MVC

    web三层架构是指: >用户接口层(UI Layer) >业务逻辑层(Bussiness Layer) >持久化层 关于业务逻辑和用户接口 在早期的web开发中,因为业务比较简单,并 ...

  9. Xamarin

    快速建立原生(Native)的行动装置应用程序: 程序代码共享: 与 Visual Studio 整合: 确保第一时间更新: 原生的应用程序效能:

  10. Dynamics AX 2012 R2 安装额外的AOS

    众所周知,AX系统分为三层:Client,Application Server,Database Server. 我们添加额外的Application Server主要是出于以下两个原因: 使用多台服 ...