本文实例讲述了JS与CSS3实现图片响应鼠标移动放大效果。分享给大家供大家参考，具体如下：
今天看网易的网站上，当我把鼠标放上去的时候发现图片放大，移开图片缩小，于是自行尝试，结果如下。
方法一：使用js和css3
效果如图：
这样的实现非常简单，就是利用js的mouseover和 mouseout事件，但是不知道如何使图片从中间放大，日后再行尝试吧，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>网易图片动画</title>
<style>
div.img {
width: 220px;
height: 170
在网页设计中，为了增强用户体验，常常会使用各种动态效果，比如当鼠标移动到图片上时，图片会放大，离开时则恢复原状。本文主要介绍了两种方法，使用JavaScript（JS）和CSS3来实现这一功能。这两种方法都可以达到预期效果，但实现方式有所不同。
方法一：结合JS和CSS3
这种方法主要依赖于JavaScript的`mouseover`和`mouseout`事件。当鼠标进入图片区域（mouseover事件），图片会执行一个CSS3动画（`bigger`），使得图片的宽度和高度增加10%，从而实现放大效果。当鼠标离开图片（mouseout事件），图片则执行另一个动画（`smaller`）返回原始尺寸。关键代码如下：
```html
<img class="bigger" src="..." alt="">
<script>
var img = document.querySelector("img");
img.onmouseover = function () {
img.style.cssText = "animation: bigger 2s;width:110%; height:110%;";
}
img.onmouseout = function () {
img.style.cssText = "animation: smaller 2s";
}
</script>
```
CSS3的`@keyframes`定义了动画的起始和结束状态，`bigger`动画让图片从100%尺寸扩大到110%，而`smaller`则是相反的过程。
方法二：纯CSS3实现
这种方法主要利用CSS3的`transform:scale()`属性，配合`transition`属性来平滑过渡。`scale()`函数可以改变元素的大小，而`transition`则控制这一改变的平滑度。当鼠标悬停在图片上（`:hover`伪类）时，图片的`transform`属性变为`scale(1.2, 1.2)`，即放大1.2倍。同时，可以通过`transform-origin`属性控制图片放大或缩小的中心点。例如，如果设置为`transform-origin: 50% 50%;`，那么图片将从中心点开始放大。以下是相关CSS代码：
```css
img.bigger {
width: 100%;
height: 100%;
transition: transform 2s;
}
img.bigger:hover {
transform: scale(1.2, 1.2);
}
```
这种方法的好处是无需JavaScript，完全依赖CSS3，简化了代码，同时也可以更好地利用硬件加速提升性能。
总结：
1. JavaScript与CSS3结合的方法通过监听鼠标事件并应用CSS3动画实现图片放大效果，优点是实现简单，缺点是需要JavaScript支持，可能对性能有一定影响。
2. CSS3的`transform:scale()`和`:hover`伪类提供了更简洁的解决方案，且能优化性能，缺点是需要浏览器支持CSS3。
在实际项目中，可以根据需求和目标用户的浏览器兼容性选择合适的方法。如果追求更丰富的交互体验，可以考虑结合使用JavaScript和CSS3，如果希望保持代码简洁且对浏览器兼容性有一定要求，纯CSS3方案是个不错的选择。在使用这些技术时，确保充分测试以确保在各种环境下都能正常工作。
