jquery实现鼠标滑过小图时显示大图的方法

利用jQuery实现鼠标滑过小图时展示大图的技巧

在网页设计中，展示图片时鼠标滑过小图显示大图是一种常见的交互方式。本文将通过实例讲解如何使用jQuery实现这一功能，让您的网站更加生动。

假设您有一组小图片，每张小图片对应一张大图。我们需要准备HTML结构、CSS样式和jQuery脚本。

HTML部分：

```html

• images/11_s.jpg" big-path="images/11_b.jpg" big-title="美人1" />
• images/22_s.jpg" big-path="images/22_b.jpg" big-title="美人2" />

```

CSS部分：

```css

li { list-style: none; float: left; margin-left: 10px; }

.preview { display: none; / 初始隐藏大图预览 / }

```

jQuery部分：

```javascript

$(function() {

$('li img').each(function() {

var $this = $(this); // 当前小图元素

var bigPath = $this.attr('big-path'); // 大图路径

var bigTitle = $this.attr('big-title'); // 大图标题

// 鼠标滑过小图时显示大图预览

$this.hover(function() {

$('preview-img').attr('src', bigPath); // 设置大图路径

$('img-title').text(bigTitle).css({ / 设置大图标题样式 /

background: 'ebf1de', padding: '10px', marginBottom: '10px'

});

$('.preview').fadeIn('fast'); // 显示大图预览

}, function() { // 鼠标移出时隐藏大图预览

$('.preview').fadeOut('fast');

});

});

});

```

在这个例子中，我们使用了jQuery的`hover()`方法来处理鼠标滑入和滑出事件。当小图的鼠标指针滑过时，对应的大图会在预定义的预览区域中显示，同时还会显示大图的标题。当鼠标指针移出小图时，大图预览将隐藏。这种交互方式为用户提供了直观、便捷的图片浏览体验。希望本文所述对大家的jQuery编程有所启发和帮助。