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

之前为大家分享了很多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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。