<!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. [转]倍数提高工作效率的 Android Studio 奇技

    转自:http://android.jobbole.com/81687/ 倍数提高工作效率的 Android Studio 奇技 2015/10/08 · 技术分享 · 4 评论· Android S ...

  2. thinkphp的钩子的两种配置和两种调用方法

    thinkphp的钩子行为类是一个比较难以理解的问题,网上有很多写thinkphp钩子类的文章,我也是根据网上的文章来设置thinkphp的钩子行为的,但根据这些网上的文章,我在设置的过程中,尝试了十 ...

  3. java netty之ServerBootstrap的启动

    通过前面的几篇文章,对整个netty部分的架构已经运行原理都有了一定的了解,那么这篇文章来分析一个经常用到的类:ServerBootstrap,一般对于服务器端的编程它用到的都还算是比较的多..看一看 ...

  4. APP更新名称

    在bundle中添加Bundle display name的key即可

  5. input内强制保留小数点后两位 位数不足时自动补0

    input内强制保留小数点后两位 位数不足时自动补0 小数点后位数超出2位时进行四舍五入 需引入jquery包 1.11.2版本 1 function xiaoshu(x) 2 { 3 var f = ...

  6. JQuery-Ajax后台提交数据与获取数据

    function jqajax(){ var urlName = $("#urlName").val(); var urla = $("#url").val() ...

  7. 使用Redis分布式队列

    1.这是处理异常的类 public class MyExceptionAttribute:HandleErrorAttribute { //public static Queue<Excepti ...

  8. 关于img 403 forbidden的一些思考

    网页中经常需要显示图片给用户看,对网站本身来说有的图片是从本地图片服务器来的,但是一旦数量多了以后,磁盘空间又是一个问题. 所以有时就希望显示其他网站的Image,直接把其他网站的图片显示在我的网站上 ...

  9. maven 编译插件

    <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compi ...

  10. Redundant Paths-POJ3177（并查集+双连通分量）

    Redundant Paths Description In order to get from one of the F (1 <= F <= 5,000) grazing fields ...