小猿圈web前端之JavaScript放大镜效果
对于经常网购的网友们，现在很多网站都有放大镜功能，每当你看到商品的时候，鼠标移动到图片时，就会有放大效果，知道是什么原理吗？小猿圈web前端就给你讲解JavaScript放大镜效果。https://upload-images.jianshu.io/upload_images/15397392-850eb51b4213312b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240逻辑分析：1. 有2个图片（大图、小图），图片之间都有很好尺寸比例2. 鼠标移入小图这里事件采用onmousemove事件，移入后显示阴影部分以及右侧大图3. 当鼠标移出则隐藏阴影部分以及右侧大图4. 鼠标在小图移动，阴影部分跟随采用clientX和clientY的位移5. 鼠标在小图部分左边移动，大图向右，刚好相反并且*其比例尺寸就是大图要移动的位置代码实现：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Title</title></head><style> *{margin:0;padding: 0} #box{ width:1200px; height: 700px; border:1px solid #ccc; margin:150px; } #min{ float:left; width:400px; height: 400px; position: relative; } b{ position: absolute; left:0; top:0; width:200px; height: 200px; background: blue; opacity: 0.5; display: none; } #max{ float:right; width:400px; height: 400px; overflow: hidden; display: none; position: relative; } #imgs{ position: absolute; left:0; top:0;
}</style><body style="height: 2000px"><div id="box"> <div id="min"><img src="imgs/min.jpg" alt=""><b></b></div> <div id="max"><img src="imgs/max.jpg" alt="" id="imgs"></div></div><script type="text/javascript">//1》鼠标移入到min这个盒子中，显示出来 放大图片的盒子和小阴影部分//2》阴影跟随鼠标移动====》var min = document.getElementById("min"), max = document.getElementById("max"), b = document.getElementsByTagName("b"), imgs = document.getElementById("imgs");min.onmousemove = function(e){ b.style.display = "block"; max.style.display = "block"; var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft; var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; var x = e.clientX+scrollLeft-min.offsetLeft- b.offsetWidth/2; var y = e.clientY+scrollTop-min.offsetTop - b.offsetHeight/2; if(x<0){ x=0; }else if(x>min.offsetWidth-b.offsetWidth){ x=min.offsetWidth-b.offsetWidth; } if(y<0){ y=0; }else if(y>min.offsetHeight-b.offsetHeight){ y=min.offsetHeight-b.offsetHeight; } b.style.left =x+"px"; b.style.top =y+"px"; imgs.style.left = -2*x+"px"; imgs.style.top = -2*y+"px";}min.onmouseout = function(){ b.style.display = "none"; max.style.display = "none";}</script></body></html>上面就是小猿圈web前端讲师讲的JavaScript放大镜效果的代码了，还在等什么快去运行一下去吧，如果遇到问题可以找小猿圈web前端讲师去解答，如果你想学习前端开发web前端自学②群：738735873，小猿圈还是很不错的，有需要的可以直接去看看的。
页:
[1]