img属于行内元素
<img src=''>gq</img>
效果
当放大图片时候,文字位置发生改变
文字出现在图片下方,因为图片有一个隐形的g线,这条线的位置和以前上学时候,用于专门写英语单词作业本上的线条最下方
解决这个问题只需要设置:display:block;就能把那空出来的位置给消除掉
也可以在图片里设置font-size:0;把文字大小为0,g线的位置就可以底线(图片)位置就可以对齐了
winodw:浏览器对象,操作浏览器相关属性和相关方法就用到window
document:就是一个API
<!DOCTYPE html> <html> <head> <title>图片放大</title> <meta charset="utf-8"> <style> body{ margin:0; padding:0; } ul{ margin:0; padding:0; list-style:none; } #container{ position:relative; width:400px; height:480px; border:1px #888 solid; margin:50px auto; } #container .pig{ margin-bottom:15px; } #container .pig .caver{ position:absolute; display:none; top:0; width:100px; height:100px; background-color:rgba(255,255,255,.2); } #container .pig img{ display:block; width:400px; height:400px; } #container .list{ display:flex; } #container .list li{ margin:auto; } #container .list img{ display: block; width:50px; height:50px; } #container .detell{ position:absolute; display:none; top:0; left:400px; width:400px; height:400px; /*border:1px solid #888;*/ background-image:url(images/mn1.jpg); background-size:400%; } #container .list .current{ border:2px solid red; } </style> </head> <body> <div id='container'> <div class='pig'> <img src="images/mn1.jpg"> <div class='caver'></div> </div> <ul class='list'> <li> <img class='current' src="images/mn1.jpg"> </li> <li> <img src="images/mn.jpg"> </li> <li> <img src="images/mn2.jpg"> </li> <li> <img src="images/mn3.jpg"> </li> <li> <img src="images/1.jpg"> </li> <li> <img src="images/2.jpg"> </li> </ul> <div class='detell'></div> </div> <script> var list = document.querySelector('.list'), imgs = list.querySelectorAll('img'), pig = document.querySelector('#container .pig'), caver = pig.querySelector('.caver'), detell = document.querySelector('#container .detell'), img = document.querySelector('.pig img'); list.addEventListener('mousemove',function(e){ if(e.target.tagName == 'IMG'){ img.src = e.target.src; detell.style.backgroundImage = 'url('+e.target.src+')' ; imgs.forEach(function(item){ item.className = ''; }) e.target.className = 'current'; } }) pig.addEventListener('mousemove',function(e){ var x = e.clientX,/*基于pig盒子左边线到浏览器的距离(鼠标在pig盒子X坐标 = 鼠标到pig盒子左边线距离 + pig盒子左边线到浏览器的距离)*/ y = e.clientY,/*基于pig盒子上边线到浏览器的距离(鼠标在pig盒子y坐标 = 鼠标到pig盒子上边线距离 + pig盒子上边线到浏览器的距离)*/ xp = pig.getBoundingClientRect().left,//pig左边到浏览器的距离 yp = pig.getBoundingClientRect().top,//pig顶部到浏览器的距离 cx = x - xp - 50, cy = y - yp - 50; console.log(x,y); if(cx < 0 ){ cx = 0; } if(cy < 0){ cy = 0; } if(cx > 300){ cx = 300; } if(cy > 300){ cy = 300; } detell.style.backgroundPosition = cx/300*100+'%'+cy/300*100+'%'; caver.style.left = cx + 'px';//caver盒子 = X轴-pig盒子左边距 caver.style.top = cy + 'px';//caver盒子 = y轴-pig盒子上边距 detell.style.display = 'block'; caver.style.display = 'block'; }) pig.addEventListener('mouseout',function(e){ var x = e.clientX, y = e.clientY, xp = pig.getBoundingClientRect().left,//pig左边到浏览器的距离 yp = pig.getBoundingClientRect().top,//pig顶部到浏览器的距离 rp = pig.getBoundingClientRect().right, tp = pig.getBoundingClientRect().bottom; if(x < xp || y < yp){//基于pig盒子左上角坐标进行判断 detell.style.display = 'none'; caver.style.display = 'none'; }else if(x > rp || y >tp){//基于盒子右下角坐标进行判断 detell.style.display = 'none'; caver.style.display = 'none'; } }) /* getBoundingClientRect() e.clientX和e.clientY是基于浏览器边界的距离 */ </script> </body> </html>
首先说明为什么要用target属性
在鼠标移入事件监听中传了一个参数e,然后console.log(e),在pig盒子里移动鼠标
会得到MouseEvent属性,点击下拉标,会看到很多属性,其中就有一个target
然后console.log(e.target)
得到HTML DOM树形节点 <ul>结构
最后e.target.tagName会到一个大写的<img>标签
getBoundingClientRect()这里简单介绍一下
指定盒子.getBoundingClientRect().left --->左边距到浏览器的距离
具体可以到该网站查看:
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect
cx = x - xp - 50,
cy = y - yp - 50;
cx和cy是鼠标在caver盒子X轴和Y轴位置,
为什么要减50,因为caver盒子宽和高都是100px,为了让鼠标处于caver盒子中间所以各减50
background-size:400%;这个是pig盒子/caver盒子得到的倍率,pig盒子的图片是100%,detell盒子是放大pig盒子图片的结果
detell.style.backgroundPosition = cx/400*100+'%'+cy/400*100+'%';
动态操作为detell盒子设置background-position属性,400是算出来倍率,乘100是caver到pig盒子右边距离为100%,到下边距离100%(这里说明有点牵强)
x < xp || y < yp表示pig盒子左边距到浏览器的距离和pig盒子上边距到浏览器的距离(x,y)
x > rp || y >tp表示pig盒子右边距到浏览器的距离和pig盒子下边距到浏览器的距离(x,y)
浏览器坐标是--->上和左是负值, 下和右是正值