jQuery中图片由中心点渐放大的神奇效果
在网页设计中，有时我们希望为用户带来一种独特的体验：当鼠标悬停在图片上时，图片会逐渐放大，仿佛从中心点向外扩张。这种效果不仅提升了用户体验，还能为网站增添一抹亮色。今天，我们将一起如何使用jQuery实现这一效果。
实现这种效果并不复杂。我们需要一个包含图片的div元素，并为其设置适当的样式。然后，通过jQuery监听鼠标的悬停和离开事件，对图片进行放大和缩小的动画处理。
以下是实现该效果的基本代码：
HTML部分：
```html
images/example.jpg" 示例图片">
```
CSS部分：
```css
image-container {
position: relative;
width: 300px; / 可根据需要调整 /
height: 200px; / 可根据需要调整 /
margin: auto;
text-align: center;
}
image-container img {
position: absolute;
left: 50%; / 将图片定位在容器中心 /
top: 50%; / 将图片定位在容器中心 /
transform: translate(-50%, -50%); / 确保图片中心与容器中心对齐 /
}
```
jQuery部分：
```javascript
$(function() {
$('image-container img').hover(function() { // 鼠标悬停时放大图片
var originalWidth = $(this).width(); // 获取图片原始宽度
var originalHeight = $(this).height(); // 获取图片原始高度
$(this).animate({ // 动画效果放大图片至原始尺寸的1.5倍大小，并调整位置使其从中心点放大
width: originalWidth 1.5,
height: originalHeight 1.5,
left: '-' + (originalWidth / 2) + 'px',
top: '-' + (originalHeight / 2) + 'px'
}, 1000); // 动画持续时间为1秒（可调整）
}, function() { // 鼠标离开时恢复图片原始大小位置（可调整动画效果）
