首页 > jQuery > 模拟google相册鼠标移动提示信息

模拟google相册鼠标移动提示信息

在jQuery中文社区中看到一篇帖子提问,http://bbs.jquery.org.cn/read.php?tid-3992.html

模拟google的照片鼠标提示信息

下面介绍如何实现:

1、在html中增加两个img

<img src=”panda.jpg” border=”0″ alt=”" width=”231″ height=”300″ />
<img src=”no.jpg” alt=”" width=”231″ height=”300″ />

2、准备一个提示信息使用的DIV层

<div id=”tipInfo” style=”display:none”></div>

这里一定要主意把tipInfo的position设置为absolute,我在做的时候就卡到这里了,后来发现原来忘了设置……

3、javascript代码:

$(function() {
        //$('#content img:not(:eq(0))')的意思是不显示第一张图片的信息
        $('#content img:not(:eq(0))').hover(
                function() {
                        var position = $(this).position();
                        var tipHight = $('#tipInfo').height();
 
                        var endTop = (position.top + $(this).height()) - tipHight;
                        //$(this).addClass('active');
                        $("#tipInfo").width($(this).width())
                                .html('作者:' + $(this).attr('author'))
                                .show()
                                .css({top: endTop + "px", left: position.left + "px"});
                },
                function() {
                        //$(this).removeClass('active');
                        $('#tipInfo').hide();
                }
        );
});

测试通过,代码很简单,点击这里查看演示

源码下载:模拟google相册鼠标移动提示信息.rar 共 266 次

Popularity: 3%

  1. GreatGhoul Apr 15th, 2009 @ 11:29 | #1

    还有一个问题,就是鼠标第一次移入一个图片时,tipInfo显示的地方在图片的下方,但第二次就好了.

  2. GreatGhoul Apr 15th, 2009 @ 11:27 | #2

    很不错的效果.简单明了.
    这里position是否换成offset,如果图片设置了margin,偏移就会有问题.

  3. lonqi Feb 23rd, 2009 @ 15:03 | #3

    鼠标放在提示层上会不停的闪烁,我也是在ff下看的。

    • admin Feb 23rd, 2009 @ 20:47 | #4

      @lonqi, 当空接龙,闪烁的问题解决了;设置了透明度,增加了链接功能

  4. 当空接龙 Feb 23rd, 2009 @ 14:18 | #5

    xixi 有点小bug,鼠标放在那个图片名字的地方会闪烁,我是ff看的

  5. lonqi Feb 23rd, 2009 @ 14:14 | #6

    不过如果把信息提示部分做成有一定的透明度的话,效果上应该会更好看些吧? :-)

  6. lonqi Feb 23rd, 2009 @ 14:10 | #7

    哇,真没想到是这样实现的,学习了。

  7. Gimmo Feb 23rd, 2009 @ 13:53 | #8

    如果说图片author的信息和图片名我想单独用一个div层来控制,不直接写在中,author的名字和图片名可已点击,直接链到图片的详细展示页中,会不会更好些。

    • admin Feb 23rd, 2009 @ 14:58 | #9

      因为信息提示使用的DIV容器,所以你可以在里面链接详细,但是要调整方法了,因为现在的事件是绑定在图片对象上的,所以要在事件处理上做点改动,否则鼠标移动到提示层时会把提示层隐藏掉

  8. zmen Feb 23rd, 2009 @ 00:36 | #10

    zmen 发表于: 2月 23rd, 2009 12:34 上午

    您的日期格式好像有问题

    • admin Feb 23rd, 2009 @ 08:46 | #11

      @zmen, 我是做java开发的,本博客使用的php语言开发的wordpress

  9. zmen Feb 23rd, 2009 @ 00:34 | #12

    谢谢,受教了

  10. seekarmor Feb 22nd, 2009 @ 21:46 | #13

    很不错!!!,学习了!!!,博主好强!!

  11. mgqy Feb 22nd, 2009 @ 17:05 | #14

    呵呵,学习了

评论提交中, 请稍候...

留言

可以使用的标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">
Trackbacks & Pingbacks ( 0 )
  1. 还没有 trackbacks