<!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. openfire二次开发eclipse环境搭建

    转自:http://blog.csdn.net/daigua245/article/details/7918243 1.将openfire源码项目解压到(如果是从SVN CO下来的则不用)eclips ...

  2. php命名、注释规范

    一.注释 1.文件头部模板 /** *这是一个什么文件 * *此文件程序用来做什么的(详细说明,可选.). * @author richard<e421083458@163.com> * ...

  3. 变量在SSIS包中的使用

    2010~2011年经常使用SSIS包采集加工数据,后来换了工作就很少使用.最近又开始用那玩意采集数据,努力回想之前是怎样操作的,网上各种找各种纠结.趁这次使用记录下日常操作步骤,以备以后不时之需. ...

  4. Array基本操作

    // defined array object val arr0= ) val arr1= Array(") println(arr1()) arr1()="Hello Spark ...

  5. 拼linq 时网上整理的一个类

    public static class DynamicLinqExpressions { public static Expression<Func<T, bool>> Tru ...

  6. ACM Coder [T1002] 一直wrong answer，不知道为什么。上代码！就对就对！

    忘了改了什么,后来居然对了!做打不死的菜鸟! #include <stdio.h> #include <stdbool.h> #define arrayLength 20 #d ...

  7. 夺命雷公狗-----React---5--props对象的传递

    提示:props的值是不可以改变的... <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  8. python日志模块

    许多应用程序中都会有日志模块,用于记录系统在运行过程中的一些关键信息,以便于对系 统的运行状况进行跟踪.在.NET平台中,有非常著名的第三方开源日志组件log4net,c++中,有人们熟悉的log4c ...

  9. 十七、Java基础---------集合框架之Map

    前两篇文章中介绍了Collection框架,今天来介绍一下Map集合,并用综合事例来演示. Map<K,V> Map<K,V>:Map存储的是键值对形式的元素,它的每一个元素, ...

  10. Spark分析笔记

    前言 第一章 Spark简介 本章将对Spark做一个介绍,以及它的一些基本概念 Spark是什么? Spark生态系统BDAS Spark架构 Spark分布式与单机多核架构的异同 Spark的企业 ...