在做放大镜的时候，几个细节点：1：css中display，flowover这两个要设置好2：在onmousemove里，不能只判断鼠标出商品框才触发display，因为鼠标下面有个遮罩盒子，所以要进行判断；其次，是鼠标在移动时对应旁边的div中的移动距离比例要掌握好。
放大镜的原理：
首先，网上购物商城使用放大镜是为了让顾客更加清晰放大的看商品图片的细节；现在开始分析放大镜，会发现当鼠标一进入商品展示框的时候，在商品照片框的右手边就会出现一个固定的框，并且鼠标下面也会显示一个方块；
当鼠标移出商品照片框的时候，右手边的框就会立马消失；
当鼠标在商品照片框中移动的时候，右手边的框会根据鼠标所在的位置，显示放大n倍的照片。
综上所述，其实，放大镜调用三个鼠标事件，onmouseover（移入），onmouseout（移出），onmousemove（一直移动），接下来细说这三个鼠标事件怎么去关联放大镜
全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#smallImg{
width: 300px;
height: 300px;
background-image: url(../img/1560692006601.png);
background-size: cover;
}
#smallDiv{
width: 100px;
height: 100px;
background-color: red;
disp
最低0.47元/天 解锁文章
184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
