<!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. angularJ表单验证

    常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" requir ...

  2. 阻塞队列LinkedBlockingQueue和并发队列ConcurrentLinkedQueue

    LinkedBlockingQueue: public class LinkedBlockingQueue<E> extends AbstractQueue<E> implem ...

  3. http cache 原理实战演习

    有篇博文介绍的原理已经比较清楚了,见下面链接, 本文给出实验结果. http://www.cnblogs.com/cocowool/archive/2011/08/22/2149929.html La ...

  4. confluence5.6安装

    转自:http://ju.outofmemory.cn/entry/157013 说明:此文在confluence-wiki-5.6.5版本亲测通过附件:http://pan.baidu.com/s/ ...

  5. [Android Tips] 10. Pull out /data/data/${package_name} files without root access

    #!/usr/bin/env bash PACKAGE_NAME=com.your.package DB_NAME=data.db rm -rf ${DB_NAME} adb shell " ...

  6. Latex常用指令学习

    1:\begin{}与\end{}的用法 2:\textcolor{red}{\fangsong\zihao{2}汉字:} 3:\newpage  新的一页 4:\heiti\zihao{4}\bf{ ...

  7. Android -- 是时候来了解一波EventBus了

    1,最早在项目中使用EventBus是在去年的时候,但自己一直没抽出时间来记录记录一下,今天就来简单的使用一下,先看一下EventBus的定义是什么 EventBus:是一个发布 / 订阅的事件总线. ...

  8. 19. 星际争霸之php设计模式--迭代器模式

    题记==============================================================================本php设计模式专辑来源于博客(jymo ...

  9. 《zw版·Halcon-delphi系列原创教程》 酸奶自动分类脚本（机器学习、人工智能）

    <zw版·Halcon-delphi系列原创教程>酸奶自动分类脚本(机器学习.人工智能) Halcon强大的图像处理能力,令人往往会忽视其内核,是更加彪悍的机器学习.人工智能.       ...

  10. phpcms V9 数据模型基类

    在学习<phpcms V9首页模板文件解析>的第七步,我们看到content_model类,文件路径:phpcms/model/content_model.class.php 从代码中,可 ...