模拟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();
        }
    );
});


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

源码[download#12#format=1]

上一篇:一行jQuery代码打印九九乘法表


下一篇:实例解析java + jQuery + json工作过程(登录)