一、放大镜
放大镜主要有两部分，一部分是小放大镜，一部分是大放大镜，都是默认隐藏，当悬浮时出现；
二、图片部分
图片原图为正常大小，放大镜所显示图片为倍数增加大小
切记：无论放大镜还是图片都是以倍数关系进行放大显示，若不是则会出现放大之后出现大小放大镜无法一致的问题
图片也是种资源,执行到img标签时,才去请求图片资源.js代码会继续执行，直接获取图片的宽高是不行的,因为图片资源没有加载完成.
三、思路
给小图绑定事件
构造移入事件函数（设置display属性，鼠标移入显示小黄块，放大的图也显示）
构造移出事件函数（设置display属性，使其隐藏）
获取box定位
获取大图的宽度和高度
计算小黄块能够移出的最大left和top
获取鼠标相对于文档的坐标（因没有滚动条和可视区的宽高一致）
进行判断不能超出左侧和上侧，右边界和下边界
计算大图移动的最大位置
实时记录大图的位置并进行设置
用$获取节点
四、代码如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--<link rel="stylesheet" href="css/index.css">-->
<style>
img {
display: block;
}
* {
最低0.47元/天 解锁文章
1035
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
