当鼠标移到图片上方时，在图片下面显示图片信息，当鼠标移出，图片信息消失
<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>
<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>
707
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
