JS原生放大镜
本文用于记录在学习写一个放大镜
放大镜的关键原理
鼠标在小图片上移动时，通过捕抓鼠标在小图片上的位置定位大图片的相应位置
做放大镜特效需要的元素
1.小图片
2.大图片
3.存放小图片和大图片的容器
4.一个放大镜
涉及的技术点
鼠标的移入移出鼠标移动3个事件
重点
1.如何让小图片的图片和大图片同时移动。坐标的计算。
主要计算的是一个比例
右边的放大部分相对于左边的放大镜来说，是一个固定的位置
图片中的ABCD都是按照相同的比例来放大的
左边放大镜的为X，小盒子的为B
右边显示的部分额为C，整一个大盒子的为D
我们需要计算的就是大盒子中的图片的left值。
因为大盒子是小盒子的等比例放大
X/B-A=？/D-C
图片中的ABCD都是可以求到的
通过X/B-A求到left的系数
var parX = left/(smallbox.offsetWidth-fdj.offsetWidth);
同理得到top的
var parY = top/(smallbox.offsetHeight-fdj.offsetHeight);然后
oimg.style.left=-parX*(oimg.offsetWidth-bigbox.offsetWidth)+'px';oimg.style.top=-parY*(oimg.offsetHeight-bigbox.offsetHeight)+'px';注意这里的parx和Y是负数，因为要反方向的移动
整体代码
页面部分
<html lang="en">
<head><meta charset="UTF-8"><title>Titletitle>
head>
<body><div id="box"><div id="box1"><div id="float-box">div><img src="./macbook-small.jpg" alt="">div><div id="box2"><img src="./macbook-big.jpg" alt="">div>div>
body>html>css样式部分
<style>*{padding: 0;margin: 0}#box{display: block;width: 400px;height: 255px;margin: 50px;position: relative;border: 1px solid #ccc;}#box1{position: relative;z-index: 1}#float-box{display: none;width: 160px;height: 120px;position: absolute;background: #ffffcc;border: 1px solid #ccc;opacity: 0.5;cursor: move}#box2{display: none;position: absolute;top: 0;left: 460px;width: 400px;height: 300px;overflow: hidden;border: 1px solid #ccc;z-index: 1}#box2 img{position: absolute;z-index: 5}style>JS实现部分
<script>
window.onload=function () {var oBox = document.getElementById('box'); //获取整体盒子var smallbox=document.getElementById('box1'); //获取左边小盒子var fdj = document.getElementById('float-box'); //左边的放大镜var bigbox = document.getElementById('box2'); //右边的盒子var oimg = bigbox.getElementsByTagName('img')[0]; //右边盒子中的图片smallbox.onmouseover=function () { //鼠标移入事件fdj.style.display='block';bigbox.style.display='block';}smallbox.onmouseout=function () { //鼠标移出事件fdj.style.display='none';bigbox.style.display='none';}smallbox.onmousemove=function (ev) { //鼠标移动事件var ev = ev||event; //兼容var left=ev.clientX-oBox.offsetLeft-smallbox.offsetLeft-fdj.offsetWidth/2; //放大镜的left，/2是为了鼠标在放大镜的中间，美观var top=ev.clientY-oBox.offsetTop-smallbox.offsetTop-fdj.offsetHeight/2; //放大镜的top，/2是为了鼠标在放大镜的中间，美观if(left<0){ //判断left的值，不让放大镜超出小盒子left=0;}else if(left>(smallbox.offsetWidth-fdj.offsetWidth)){left=smallbox.offsetWidth-fdj.offsetWidth;}if(top<0){ //判断top的值，不让放大镜超出小盒子top=0;}else if(top>(smallbox.offsetHeight-fdj.offsetHeight)){top=smallbox.offsetHeight-fdj.offsetHeight;}var parX = left/(smallbox.offsetWidth-fdj.offsetWidth);var parY = top/(smallbox.offsetHeight-fdj.offsetHeight);//改变放大镜和右边图片的left和topfdj.style.left=left+'px';fdj.style.top=top+'px';oimg.style.left=-parX*(oimg.offsetWidth-bigbox.offsetWidth)+'px';oimg.style.top=-parY*(oimg.offsetHeight-bigbox.offsetHeight)+'px';}}script>
