当鼠标移到图片上方时，在图片下面显示图片信息，当鼠标移出，图片信息消失
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript" src="jquery-1.3rc1.js"></script>
<script language="javascript" type="text/javascript">var $div = $( '<div></div>' ).css( { position: 'absolute', background: '#FC0', fontSize: '12px' } );
$( document ).ready( function(){
$( '#inimg' ).hover( function(){
var imgTop = $( this ).offset().top;
var imgHeight = $( this ).height();
var imgWidth = $( this ).width();
var instruct = $( this ).attr( 'instruct' );
$div.text( instruct );
var divHeight = $div.height();
$div.css( { top:( imgTop + imgHeight - divHeight ), left: $( this ).offset().left, width: imgWidth } )
.fadeIn( 'normal' ).appendTo( document.body );
}, function(){
$div.fadeOut( 'normal' );
} );
} );
</script>
</head>
<body>
<img src="xixi.jpg" id="inimg" instruct='图片说明' /><br/>
</body>
</html>
- 大小: 35.9 KB
分享到：
相关推荐
jquery实现的鼠标划过图片显示详情提示效果
使用jquer实现类似于淘宝上的图片放大镜效果
图片高亮显示在页面中很常见，下面是用jquery实现图片高亮显示的效果 html代码部分 <body> <div> /*添加图片*/ <img src="img/1.jpg"> <img src="img/2.jpg"> <img src="img/3.jpg"> ...
图片切换 使用JQUERY插件，动态获取主题。4中显示图片的效果
jquery hover图片放大特效鼠标滑过图片浮动层变大显示 jquery hover图片放大特效鼠标滑过图片浮动层变大显示 jquery hover图片放大特效鼠标滑过图片浮动层变大显示
jquery鼠标导航下滑显示图片列表效果 jquery鼠标导航下滑显示图片列表效果 jquery鼠标导航下滑显示图片列表效果 jquery鼠标导航下滑显示图片列表效果
一款jquery+css3实现图片提示效果的例子。
本文实例为大家分享了jQuery实现图片跟随效果的具体代码，供大家参考，具体内容如下 要实现的功能： * 鼠标进来，显示大图片； * 鼠标出去，隐藏大图片； * 鼠标在大图片里边动，大图片跟着动。 <html> <head>...
jquery实现的图片翻转效果，样式新颖活泼，鼠标滑过图片显示红色的透明层，透明层上显示文字
jQuery实现的iPhone Retina显示屏图片放大效果
jquery css3鼠标悬停图片放大显示效果代码
jquery实现鼠标滑过图片黑白显示的特效
jQuery实现鼠标移到链接提示显示图片功能插件 jquery实现鼠标经过链接放大图片特效代码 jquery实用Banner大图片横向切换效果 jquery实用产品图片展示动感切换效果源码 jquery平滑交换真彩色的图片逐渐变为黑白图像的...
jQuery实现的3D照片流放大显示效果.zip
利用jQuery实现在地图标记的效果，点击相应区域实现提示框显示
jQuery实现的效果非凡的缩略图可放大显示的照片墙效果
jQuery实现鼠标滑过图片显示隐藏标题效果源码.zip
图片墙，实现滚动，鼠标移上，显现滚动的效果