1.24 简单写一个js放大镜
写在前面
首先声明我是一个菜鸟
这是写给我自己看的，如果有朋友碰巧看到了，有错误和优解请留言讨论
没必要戾气重哈，然后是我的文章风格应该是想到哪说到哪，天马行空，就很打脑壳，反正记录一下做的流程嘛
1/24日 找到了一个经典的js运用，就是放大镜，由于本人只有一点css和js基础，所以就是找一些资料来看
用到的工具就是 Hbuilder 我觉得这个工具很适合我这种小白
最重要的是，我是边撸代码边写文章，这个是线性的，不是那些大佬直接一气呵成的那种
开始撸代码
1.思路
其实我真就没想过什么思路，最幼稚的想法就是，估计就是靠一些对鼠标位置信息的判断，加个监听事件就好了，
但是我估计我写不出来，于是我就找了参考资料
这是参考一位大佬的博客
https://blog.csdn.net/Inory_ye/article/details/112585785?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-2&spm=1001.2101.3001.4242
鬼知道为什么这么长，而且有个参数spm
不要在意细节，
这里我想到了我那天看的一本书《传播学教程》
在描述 传播学早期学术思想源流的时候 对于欧洲源流中的一位学者，我是印象深刻
法国社会心理学家 塔尔德 以及他的模仿理论 ，即“一切社会事物‘不是发明就是模仿’，纯粹的发明是极少见的，大量的行为是模仿。”
还有一些东西扯到社会信息系统了，所以我就不说了
总之，我这里一葫芦画瓢来弄一下，并且加以注释，希望能够内化成自己的东西
2.开始写代码
首先，我觉得我得对我自己强调一次盒子的层级重要性
一个简单的东西，在这个展示的时候，你得复杂了想，不要觉得一个盒子就够了，我是吃过这个亏的，
无限套娃是有好处的，坏处的话，我现在只遇到一个，就是触发无限的抖动，如果能get到我的点的朋友，我觉得你也是 菜 鸟 不是你也是同道中人，
就是因为阶级关系没有搞清楚，然后乱加:hover ，本该加到父盒子，你给加到子盒子，你可能忘记了
还有缝
你把鼠标就放到 父盒子和子盒子的那个小缝之间，好了鬼畜了
2.1 简单的层次关系
话又回来，这次建的是放大镜，我觉得页面盒子关系应该这个样子
红色 这个框就是主体class = "pic" 的框框，用来展示的这个大框框 老祖父盒子
蓝色 这个是放普通展示的图片的盒子框框
黑色 这个是一个窗口，里面有一个子盒子就是灰色的，有经验的朋友都知道这个盒子的overflow应该是什么了
灰色 放大片的
蓝色和黑色是平行关系，因为有position就动了起来
对照这个代码康康
1 <body> 2 <div class="pic"> 3 <img class="img" alt="" src="img/DSC01040.jpg"> 4 <div class="magnifier"> 5 <img class="img" id="magnifiedImg"alt="" src="img/DSC01040.jpg"> 6 </div> 7 </div> 8 9 </body>
2.2 CSS
然后是整个的css代码
1 .pic{ 2 margin: auto; /* 这个应该可要可不要 */ 3 text-align: center; /* 居中 */ 4 position: relative; /* 子绝父相 */ 5 display: block; 6 width: 60%; /* 相对于浏览器而言 */ 7 } 8 9 .img{ 10 width:100%; /* 相对于pic而言 */ 11 } 12 13 14 .magnifier{ 15 position: absolute; 16 width:200px; 17 height:200px; 18 border-radius: 50%; 19 box-shadow: 1px 1px 10px 1px gray; 20 left: 0; 21 top: 0; 22 overflow: hidden; 23 opacity: 0 ; 24 } 25 26 #magnifiedImg{ 27 width: 1000%; /* 相对于这个父盒子 */ 28 position: absolute; 29 left: 0; 30 top: 0; 31 }
2.3 js
接着就是js了
1 const magnifier =document.querySelector(".magnifier"); 2 const maginfiedImg = document.querySelector("#magnifiedImg"); 3 const pic = document.querySelector(".pic"); 4 5 pic.addEventListener('mousemove', function(e){ /* 首先e表示的是本事件event 也就是mousemove的这个事件 */ 6 let mouseX = e.clientX; 7 let picX = pic.offsetLeft; 8 let X = mouseX - picX - magnifier.offsetWidth/2 ; 9 /* 注意X这里可能会有个误区,就是 10 X = ( mouseX - picX ) / 2 11 这里忽略了放大镜圈圈的半径 */ 12 13 // 进行对X的判断，目的是为了处理是不是在边缘的问题 14 15 if(X <= 0 ){ X =0 ;} 16 17 // 算出放大镜最多能移动多远 18 let maxMagnifierX = pic.offsetWidth - magnifier.offsetWidth; 19 20 if(X >= maxMagnifierX){ X = maxMagnifierX ;} 21 22 // 进行赋值 23 magnifier.style.left = X + "px"; 24 25 // 接着对放大的图片进行位移判断 26 // 首先是算出大图片与原图片的比例（宽) 27 let scaleX = maginfiedImg.offsetWidth / pic.offsetWidth; 28 29 /* 注意这个地方就有点难理解了,为什么 我这里很多个变量, 首先我们先把里面的弄清楚,就是(X +magnifier.offsetWidth/2) 30 这个其实是鼠标的原始距离(相对的) 这个弄出来与比例相乘就得出来 在大图片里应该的鼠标位置,然后一葫芦画瓢弄,就得到了 31 注意这里是负数,因为不是远离原来的位置(有点抽象) */ 32 maginfiedImg.style.left = - (scaleX * (X +magnifier.offsetWidth/2) - magnifier.offsetWidth/2 )+"px"; 33 34 // 进行top的判断 35 let mouseY = e.clientY; 36 let picY = pic.offsetTop; 37 let Y = mouseY - picY - magnifier.offsetHeight/2 ; 38 if(Y <= 0 ){ Y =0 } 39 let maxMagnifierY = pic.offsetHeight - magnifier.offsetHeight; 40 if(Y >= maxMagnifierY){ Y = maxMagnifierY} 41 magnifier.style.top = Y + "px"; 42 let scaleY = maginfiedImg.offsetHeight / pic.offsetHeight; 43 maginfiedImg.style.top = - ( scaleY * (Y +magnifier.offsetHeight/2)- magnifier.offsetHeight/2)+"px"; 44 }) 45 46 pic.addEventListener('mouseover',function(){ 47 magnifier.style.opacity="1"; 48 }); 49 pic.addEventListener('mouseout',function(){ 50 magnifier.style.opacity="0"; 51 });
相关的点，注释写了一些，记得引用js的时候放在html后面那里，不然要报错
2.4 演示
然后是演示一下gif
然后
照片是我自己拍的
最后总结一下
学会了let 和 var 的区别，let相当于局部变量，var是全局变量
然后是添加监听事件，以及函数function(e)的e 是什么意思
还有querySelector
回顾了当初学html的时候套娃盒子的快乐过程
总之
我感觉监听事件很有用，然后数学的东西好久没想过了，确实脑子转不过来弯弯，今天是记录的第一天，希望每天都能坚持下来
好了
每日一篇记录文章，今天完了
