首先我们需要定义一个放大图片的框架，可以使用HTML和CSS来实现。如下所示：
<div id="imgBox" >
<img id="bigImg" src="" />
</div>
这里的div标签是放大图片的框架，它的id属性为“imgBox”，里面嵌套了一个img标签，id属性为“bigImg”，用于显示放大后的图片。这个框架需要设置一些样式，比如position为absolute，这可以让图片的放大框架固定在页面中的某一个位置上；border为1px，这样可以让图片的放大框架有一定的边框；z-index为9999，这是为了让放大的图片一定在最上层显示。
然后我们需要定义一些JavaScript的事件，用于实现图片的放大功能。下面我们来看一下具体的代码实现：
var imgList = document.querySelectorAll('.imgs'); //获取所有需要放大的图片
var imgBox = document.getElementById('imgBox'); //获取放大图片的框架
for (var i = 0; i < imgList.length; i++) {
imgList[i].addEventListener('click', function (e) {
var bigImg = document.getElementById('bigImg'); //获取用于显示放大图片的img标签
bigImg.src = this.src; //将点击的小图的地址赋值给img标签
imgBox.style.display = 'block'; //显示放大图片的框架
imgBox.style.top = e.clientY + 'px'; //设置框架的top属性，让它跟着鼠标一起移动
imgBox.style.left = e.clientX + 'px'; //设置框架的left属性，让它跟着鼠标一起移动
});
imgList[i].addEventListener('mousemove', function (e) {
var imgBox = document.getElementById('imgBox'); //获取放大图片的框架
imgBox.style.top = e.clientY + 'px'; //根据鼠标的位置来移动放大图片的框架
imgBox.style.left = e.clientX + 'px';
});
}
imgBox.addEventListener('click', function () {
this.style.display = 'none'; //隐藏放大图片的框架
});
以上代码实现了鼠标点击图片时，将图片地址赋值给用于显示放大图片的img标签，并且显示出放大的图片框架。接下来，当鼠标在图片上移动时，将放大框架跟着鼠标一起移动。最后，当鼠标点击放大框架时，将其隐藏。
总的来说，以上代码通过JavaScript实现图片的放大功能，让网站展示的图片更加适合用户的观看需求。
上一篇：css按钮大小自适应
下一篇：css按钮背景变图片
