首先放大镜的原理是通过移动前面小图片里面的小黑块的位置,然后移动后面大图片的位置。
那么可以先把要实现的效果列个步骤出来。
1. 鼠标放到小盒子上面的小方格 大图片框出来
2. 鼠标移出小盒子上面的小方格 大图片框消失
3. 小方格随着鼠标移动
4. 移动小方格 大图片盒子的大图片随着移动
首先完成html还有css部分(偷了个懒,直接让大盒子和小方格的比例 与大图片和小图片的比例一致,这样在后面计算大图片移动位置比较简单,如果不想偷懒,需要在计算移动位置的时候算上两者的比例)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜效果</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 1300px;
margin: 0 auto;
position: relative;
}
.small_box {