用jQuery实现MouseOver信息提示框

165 阅读 0 评论 109 点赞

我是靠谱客的博主负责墨镜，这篇文章主要介绍用jQuery实现MouseOver信息提示框，现在分享给大家，希望可以做个参考。

很多网站上都有像下图那样的功能，当鼠标移到某个链接上的时候，会出现有一个小的信息框(tooltips)，但显示的方式、内容、特效各不相同。在这里我仅展示如何用jQuery实现一个简单的信息框。

为了让示例简单，仅实现基本功能，并且将信息框的信息隐藏在当前页面，而不采用Ajax的方式加载，该信息框的工作方式如下：

当鼠标移动到特定的链接上时显示一下与之相关的信息框
当鼠标在该特定链接上移动时，提示框跟着移动
当鼠标移出该链接时，信息框消失

我的设计思路：

给每个将要显示信息框的链接添加一个同样的类(jToolTips)
给每个链接添加一个rel属性，用于保存对应的隐藏信息的ID
当鼠标移动到某个链接时，给该对象添加一个isActive属性并设置为true
将对应的隐藏的信息添加到信息框中
将信息框的坐标设置为当前鼠标位置并偏移12px

JavaScript实现

01(function ($) { 

02  

03    $.tooltips  = function (opts) { 

04  

05            var settings = $.extend ({ 

06                                 className : "jToolTips", 

07                                 tipbox : "jToolTipsBox"

08                                 }, opts); 

09  

10            var tipBox = $(' 

11<DIV id="' + settings['tipbox'] + '"></DIV> 

12  

13').hide().appendTo('body'); 

14  

15            $("." + settings['className']).each (function () { 

16                var _this = this; 

17  

18                $(this).bind("mouseover mousemove", function (event) { 

19  

20                    if (!_this.isActive ) { 

21                        $(_this).attr("title", ""); 

22                        _this.isActive = true; 

23                        tipBox.html($("#" + $(_this).attr("rel") ).html()).show(); 

24                    } 

25  

26                    tipBox.css({top: event.pageY + 12, left: event.pageX + 12}); 

27                }); 

28  

29                $(this).mouseout (function () { 

30                    _this.isActive = false; 

31                    tipBox.hide(); 

32                }); 

33  

34            }); 

35  

36    }; 

37  

38})(jQuery);

调用脚本

1<SCRIPT type=text/javascript>

2$(document).ready (function () {

3    $.tooltips();

4});

5</SCRIPT>

基本样式

01#jToolTipsInfoBox { 

02    display:none; 

03} 

04  

05.jToolTips { 

06} 

07  

08#jToolTipsBox { 

09    position:absolute; 

10    border:2px solid #39F; 

11    background:#FFF; 

12    max-width:300px; 

13    padding:5px; 

14}

HTML结构

1<A class=jToolTips title=jQuery href="http://jquery.com" rel=jQueryInfo>jQuery</A>  

2<DIV id=jToolTipsInfoBox> 

3<DIV id=jQueryInfo> 

4    A fast, concise, library that simplifies how to traverse HTML documents, handle events, perform animations, and add AJAX. 

5    </DIV> 

6</DIV>