当鼠标移到图片上方时，在图片下面显示图片信息，当鼠标移出，图片信息消失
<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 我们可以轻松地实现点击图片放大效果。关键在于监听点击事件，获取图片源，创建并定位放大图片，以及添加适当的 CSS 样式。这种方法可以增强用户体验，尤其是在需要详细查看图片的场合。在...
通过jQuery实现菜单显示效果的关键是编写能够响应事件（如鼠标悬停）的脚本。在脚本中，我们通常会使用`.hover()`方法来触发动画效果。当鼠标移动到菜单项上时，对应的子菜单会被显示出来；当鼠标离开时，子菜单则被...
以下是一些使用JQuery实现的关键知识点： 1. **导航菜单**：JQuery可以轻松地创建响应式和动态导航菜单。通过事件监听（如`click`）和CSS类的添加/删除，我们可以实现菜单项的高亮、下拉子菜单的展开和收起，以及...
总结起来，使用jQuery实现图片滚动效果涉及到HTML布局、CSS美化、jQuery选择器、动画功能、事件处理和优化策略等多个方面。通过实践和学习，你可以掌握这个过程，并将其应用于各种项目，提升网页的用户体验。
**jQuery 实现图片全屏显示插件** 在网页设计中，有时我们需要为用户提供一个功能，让他们可以放大查看图片，提供更好的视觉体验。jQuery 是一款强大的 JavaScript 库，它简化了DOM操作、事件处理以及动画效果的...
总的来说，jQuery实现的图片展示效果不仅丰富了网页视觉体验，也为开发者提供了强大的工具。通过掌握jQuery的基本操作和插件应用，我们可以创造出更多富有创意的图片展示效果，为用户提供更加优质的交互体验。
本文将深入探讨如何利用jQuery实现这种酷炫的图片滤镜效果，并结合提供的文件进行详细解析。 首先，我们要理解jQuery是什么。jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax...
在本文中，我们将深入探讨如何实现一个基于jQuery的图片左右滚动效果，这通常用于网站的轮播图或幻灯片展示。这个效果包含了左右箭头，可以手动切换，同时具备自动轮播的功能，大大增强了用户体验。 首先，我们需要...
本项目“jquery层叠图片横向平滑移动轮播切换效果”是利用jQuery实现的一种动态图片展示方式，通常被用于网站的首页或产品展示区域，以吸引用户的注意力并提供丰富的视觉体验。 一、jQuery轮播原理 轮播切换效果的...
本示例中的"jQuery图片摇晃显示效果"是一种利用jQuery实现的互动图片展示功能，旨在为用户提供一种独特且有趣的用户体验。这种效果通常用于图片相册或画廊应用，增加网站的趣味性和吸引力。 首先，让我们了解一下这...
"jQuery实现的鼠标划过图片显示详情提示效果"是一种常见的交互式设计技术，它允许用户在鼠标悬停在图片上时，展示与该图片相关的详细信息，如描述、来源或者额外的图片。这种效果可以提升用户的浏览体验，使他们更...
标题“jquery高亮图片框 jquery图片展示 jquery效果很好”所指的知识点主要围绕jQuery如何实现高亮图片框以及优雅地展示图片。下面将详细介绍这两个方面，并探讨jQuery库在实现这些功能时的优势。 首先，jQuery高亮...
当最后一张图片显示后，需要回到第一张，这就涉及到了循环逻辑。 5. **过渡效果**：为了让轮播更平滑，可以使用jQuery的动画方法，如`.fadeIn()`和`.fadeOut()`，实现图片的淡入淡出效果。还可以通过改变图片的`...
5. **响应式布局**：适应不同屏幕尺寸，确保在桌面和移动端都有良好的显示效果。 6. **分页指示器**：显示当前图片在所有图片中的位置，帮助用户了解进度。 7. **预加载**：预先加载下一张图片，减少延迟，提高用户...
这个项目“jquery实现的图片滑动并带有放大镜效果代码”显然是利用 jQuery 实现了一个功能丰富的图片展示功能，包括图片轮播和放大镜效果。下面我们将详细探讨这些知识点。 首先，图片轮播（Slider）是一种常见的...
jQuery作为一款强大的JavaScript库，为开发者提供了丰富的功能，使得图片显示效果的实现变得更加简单和多样化。本文将深入探讨jQuery在处理图片显示效果方面的应用。 一、基本原理 jQuery通过操纵DOM（文档对象...
本文将深入探讨如何利用JQuery实现这种效果，以及介绍一个具体的插件——jquery-largephotobox-0.1.0。 首先，JQuery的核心在于它简洁的语法和对DOM操作的强大支持。在实现图片预览效果时，我们通常会涉及以下关键...
在本项目中，"jquery+css3实现图片3D切换效果"是一个利用现代Web技术创建交互式用户体验的实例。这个项目结合了JavaScript库jQuery和CSS3的强大功能，为用户提供了一种创新的方式来展示和切换图片，特别是在网页设计...
标题“Jquery实现预览效果”指的是使用jQuery来实现在用户选择图片文件后立即显示预览图的功能。这个功能在许多网站中都很常见，比如在线图像编辑工具或上传照片的应用。以下将详细讲解如何使用jQuery来实现这一功能...
总的来说，Asp.Net+Jquery结合使用，可以轻松地实现图片放大镜效果，为用户提供更加直观和互动的浏览体验。在实际项目中，还可以根据需求进行个性化定制，比如增加多图切换、手势控制等功能，提升用户体验。通过深入...