一、放大镜
放大镜主要有两部分,一部分是小放大镜,一部分是大放大镜,都是默认隐藏,当悬浮时出现;
二、图片部分
图片原图为正常大小,放大镜所显示图片为倍数增加大小
切记:无论放大镜还是图片都是以倍数关系进行放大显示,若不是则会出现放大之后出现大小放大镜无法一致的问题
图片也是种资源,执行到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;
}
* {