在jQuery中文社区中看到一篇帖子提问,http://bbs.jquery.org.cn/read.php?tid-3992.html
下面介绍如何实现:
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 次
声明:该日志由咖啡兔发表,你可以自由发表评论或转载到你的网站或博客。
转载请注明转自 what is the RIA? just it…||咖啡兔 ™
原始链接:http://www.wsria.cn/archives/285 | 模拟google相册鼠标移动提示信息
Popularity: 3%
还有一个问题,就是鼠标第一次移入一个图片时,tipInfo显示的地方在图片的下方,但第二次就好了.