首页 > Web开发 > 详细

基于jQuery的时间轴鼠标悬停动画插件

时间:2014-12-25 09:57:56      阅读:290      评论:0      收藏:0      [点我收藏+]

之前为大家分享了很多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的时间轴鼠标悬停动画插件

原文:http://www.cnblogs.com/liaohuolin/p/4183913.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!