在html中怎么用js实现鼠标指向图片时图片放大到原图那么大？（具体实现）

在html中怎么用js实现鼠标指向图片时图片放大到原图那么大？（具体实现）

首先是div布局：









2.添加CSS和JS样式：（1）添加CSS样式，就是写静态页面，这个图片怎么在页面上显示；（2）添加JS效果是鼠标经过小盒子， 显示遮罩和大盒子 ，鼠标离开后隐藏。

























3.在开发工具里面的截图：

4.未添加CSS样式和JS效果浏览器的截图：

5.添加CSS和JS效果的浏览器的截图：

需要准备两张图，一张是小图，一张是指向的时候显示的大图。
在小图的hover事件中把大图显示出来就行了（可以先隐藏，指向的时候再显示，然后滑出来的时候再隐藏）。用jquery实现大致就是这样子：
$('#xiaotu').hover(
function(){
// 滑进去显示隐藏的大图
},
function(){
// 划出去隐藏已经显示的大图
}
);追问可是我的那个只能用一张图片，，大神。。怎么解决？？追答一张图不行，得有张大图才行，纯html,javascript又没法做到放大小图。其实这个也简单啊，你把图片找齐了，然后网上下个图片处理工具一次性生成每张图对应的小图不就行了。

很简单啊，先把图片用css缩小，再用js滑过的时候放大就好啦，图省事我就把js直接写在图片上了，你可以自己抽出来：

或者更简单的，直接用css控制，连js都不用写了：