注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Thunte软件

新博客地址:http://thunte.blog.163.com/

 
 
 

日志

 
 

教程 - 利用jQuery创建漂亮的动画提示(Tooltip)  

2011-01-07 20:34:18|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
教程 - 利用jQuery创建漂亮的动画提示(Tooltip) - 尼克的故事 - Nikos space

 

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

下面我为大家演示一下源代码基础与实际运用教程。

      拿搜索框做例子:                                                                                                   

      首先,我们需要一个容器来接受鼠标指向事件和容纳提示内容。

                                                                                                                        

看一下搜索框的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. 就这些。你还可以将此代码稍改一下使你的导航栏下拉菜单也有这样的效果。

  评论这张
 
阅读(180)| 评论(2)
推荐

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017