YuAo's 1990

      这些天一直想给网站添加一些提示框，始终找不到比较好的，要么使用太麻烦，要么效果很差。无奈自己做了一个。好了，现在（2009年5月30日）把鼠标移到导航栏旁的搜索框上，就能看到效果。还有侧栏的“搜索文章”，也是。

      拿搜索框做例子：

      首先，我们需要一个容器来接受鼠标指向事件和容纳提示内容。看一下搜索框的HTML:

<div class="ddtip" style="width: 200px;">

     <form action="/entries" method="get" style="padding: 3px; width: 200px;">
        <input name="query" id="blog_search" type="text" />
     </form>

     <div class="tipcontent" style="max-height: 50px; position: absolute;">
        <p style="background-color: white; color: black;">输入关键字，按回车开始搜索。</p>
     </div>

</div>

class="ddtip" 的容器就是这个接受鼠标指向事件的容器，它的子容器( class="tipcontent" )放置的是提示内容。需要在站点的css中加入下面的代码，以使 tipcontent 的内容不显示出来。

.tipcontent {display:none; height:0;}

 注意HTML代码中的 style="max-height:50px;" 这里的 max-height 是指提示显示时的高度，必须指定，JavaScript代码需要用到这个值。

下面，利用 JavaScript 实现显示和动画效果。以下JavaScript需要 jQuery. 请确定在使用下面的代码之前你已经在HTML中加入引入jQuery的代码。

jQuery(document).ready(function(){
    jQuery('.ddtip').mouseover(function(){
        var tipcontent=jQuery(this).children('.tipcontent');
        var thisht=tipcontent.css('max-height');
        tipcontent.stop().animate({height:thisht},{queue:false, duration:600, easing: 'easeOutBounce'})
    });
    jQuery('.ddtip').mouseout(function(){
        jQuery(this).children('.tipcontent').stop().animate({height:'0'},{queue:false, duration:600, easing: 'easeOutBounce',complete:function(){jQuery(this).css('display','none')}})
    });
});
jQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend( jQuery.easing,
{    
    easeOutBounce: function (x, t, b, c, d) {
        if ((t/=d) < (1/2.75)) {
            return c*(7.5625*t*t) + b;
        } else if (t < (2/2.75)) {
            return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
        } else if (t < (2.5/2.75)) {
            return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
        } else {
            return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
        }
    }
});

     OK. 就这些。你还可以将此代码稍改一下使你的导航栏下拉菜单也有这样的效果。这里有一个类似的：例子 | 教程

     另外，ddtip 和 tipcontent 的位置关系需要你自己指定。更多详细的信息请研究”搜索框“或侧栏”搜索全文“部分的代码......