之前为大家分享了很多jquery插件,这次我们要来分享一款不太常见的jQuery插件,它是一个时间轴,时间轴上的每一个点在鼠标滑过时都可以显示该点的描述信息,并且鼠标滑过时都可以产生一定的动画特效,比如鼠标划过时圆圈的展开动画。

在线预览   源码下载

实现的代码。

html代码:

 <div class="clearfix course_nr">
<ul class="course_nr2">
<li>1993
<div class="shiji">
<h1>
1993</h1>
<p>
内容描述1。</p>
</div>
</li>
<li>1999
<div class="shiji">
<h1>
1999</h1>
<p>
内容描述2;</p>
</div>
</li>
<li>2003
<div class="shiji">
<h1>
2003</h1>
<p>
内容描述3</p>
</div>
</li>
<li>2007
<div class="shiji">
<h1>
2007</h1>
<p>
内容描述4</p>
</div>
</li>
<li>2008
<div class="shiji">
<h1>
2008</h1>
<p>
内容描述5</p>
</div>
</li>
<li>2009
<div class="shiji">
<h1>
2009</h1>
<p>
内容描述6</p>
</div>
</li>
<li>2013
<div class="shiji">
<h1>
2013</h1>
<p>
内容描述7</p>
</div>
</li>
<li>2014
<div class="shiji">
<h1>
2014</h1>
<p>
内容描述7</p>
</div>
</li>
</ul>
</div>

jquery代码:

 $(function () {

            //首页大事记
$('.course_nr2 li').hover(function () {
$(this).find('.shiji').slideDown(600);
}, function () {
$(this).find('.shiji').slideUp(400);
}); });

via:http://www.w2bc.com/Article/13473

基于jQuery的时间轴鼠标悬停动画插件的更多相关文章

  1. jQuery时间轴鼠标悬停动画

    在线演示 本地下载

  2. 基于jquery带时间轴的图片轮播切换代码

    基于jquery图片标题随小圆点放大切换.这是是一款带时间轴的图片轮播切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="decoroll2 ...

  3. 基于CSS3制作的鼠标悬停动画菜单

    之前分享了好多款css3实现的鼠标悬停效果.今天再给大家带来一款基于CSS3制作的鼠标悬停动画菜单.这款菜单适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界 ...

  4. WPF ListView控件设置奇偶行背景色交替变换以及ListViewItem鼠标悬停动画

    原文:WPF ListView控件设置奇偶行背景色交替变换以及ListViewItem鼠标悬停动画 利用WPF的ListView控件实现类似于Winform中DataGrid行背景色交替变换的效果,同 ...

  5. 模仿win10样式,基于jquery的时间控件

    工作需要,写了一个基于jquery的时间控件,仿win10系统时间控件格式. 目前基本功能都有了,但时间格式只实现少数,但由于结构设计已经充分优化,填充起来非常容易. 这个控件相对网上其他的时间控件, ...

  6. 一款基于css3非常实用的鼠标悬停特效

    今天给大家带来一款基于css3非常实用的鼠标悬停特效.这款特效,当鼠标经过时候一个半透明的遮罩层倒下来.效果很好,而且是纯css3实现的,代码很少,非常实用. 效果如下: 在线预览   源码下载 实现 ...

  7. 一款基于css3的简单的鼠标悬停按钮

    今天给大家分享一款基于css3的简单的鼠标悬停按钮.这款悬停按钮鼠标经过前边框是间断的.当鼠标经过的时候边框间隔消失.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  8. 纯css3实现的鼠标悬停动画按钮

    今天给大家带来一款纯css3实现的鼠标悬停动画按钮.这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形.效果图如下: 在线预览   源码下载 实现的代码. html代码: < ...

  9. 基于jQuery的图片相册滑出放大插件

    今天给大家带来一款基于jQuery的图片相册滑出放大插件.点击相册图片,展示该图片.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗..效 ...

随机推荐

  1. 自定义ImageView 手势 缩放 滑动 矩阵

    功能 初始时大小控制,图片宽或高大于view的,缩小至view大小,否则按原始大小显示双击放大,第一次双击后将图片宽或高放大到view的宽或高的比例再次双击会再在此前基础上放大固定的倍数放大两次后后再 ...

  2. Web开发中的6个坏习惯

    在 Usersnap,我们在能很好的组织网站开发有超过20(总和)年的经验.我们认为这些过去的经验能让我们很好的分辨出什么是好.坏和丑陋的网站开发.如今我们不想把注意力放在消极的部分,但就这一次,我们 ...

  3. Mysql触发器、模糊查找、存储过程、内置函数

    原本觉得Mysql的一些知识还是差不多了,但是在实际上在项目上用的时候,发现什么都忘记了.现在重新回顾一下,顺便做个笔记. 触发器                                    ...

  4. Android -- ContentProvider与联系人

    数据库                                                                                         读联系人 raw ...

  5. [Functional Programming] Write a simple version of Maybe

    Maybe has two types: Just / Nothing. Just() will just return the value that passed in. Nothing retur ...

  6. (剑指Offer)面试题43:n个骰子的点数

    题目: 把n个骰子仍在地上,所有骰子朝上一面的点数之和为s.输入n,打印出s的所有可能的值出现的概率. 思路: s可能出现的值的范围为:n--6*n 1.全排列 回溯法枚举n个骰子(6面)的全排列,然 ...

  7. UNIX网络编程读书笔记:套接口地址结构

    前言 大多数套接口函数都需要一个指向套接口地址结构的指针作为参数.每个协议族都定义它自己的套接口地址结构.这些结构的名字均以"sockaddr_"开头,并以对应每个协议族的唯一后缀 ...

  8. Unity开发 手机平台播放影片

    http://www.cnblogs.com/zhaoqingqing/p/3401747.html 截止到目前的Unity4.2版本,要在手机平台上播放影片,有两种方法: 使用Unity自带的Mov ...

  9. Unity WP8开发环境

    Unity WP8开发环境   VS2012旗舰版: 安装WP SDK8.0出错提示: 根据当前系统时钟或签名文件中的时间戳验证时要求的证书不在有效期内 解决办法: 方法一:把操作系统的时间日期调整到 ...

  10. AA MME设备内部错误

    adobe audition 找不到所支持的音频设备 这是3.0的错误!     上面是cs6的错误的图   主要原因是以前安装过,没有注册表没有清理干净     解决方案: https://jing ...