小猿圈web前端之JavaScript放大镜效果

小猿圈002 · 发表于 2019-5-16 17:25:25

对于经常网购的网友们，现在很多网站都有放大镜功能，每当你看到商品的时候，鼠标移动到图片时，就会有放大效果，知道是什么原理吗？小猿圈web前端就给你讲解JavaScript放大镜效果。

逻辑分析：

1. 有2个图片（大图、小图），图片之间都有很好尺寸比例

2. 鼠标移入小图这里事件采用onmousemove事件，移入后显示阴影部分以及右侧大图

3. 当鼠标移出则隐藏阴影部分以及右侧大图

4. 鼠标在小图移动，阴影部分跟随采用clientX和clientY的位移

5. 鼠标在小图部分左边移动，大图向右，刚好相反并且*其比例尺寸就是大图要移动的位置

代码实现：

<!DOCTYPE html>

<html>

<head>

<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>

</div>

//1》鼠标移入到min这个盒子中，显示出来放大图片的盒子和小阴影部分

//2》阴影跟随鼠标移动====》

var min = document.getElementById("min"),

max = document.getElementById("max"),

b = document.getElementsByTagName("b")[0],

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，小猿圈还是很不错的，有需要的可以直接去看看的。

账号		自动登录	找回密码
密码			立即注册

VMware vcenter+vSphere 6.5 U2共享

【跟谁学】韩宇极简英语课-技术人员不得不

用Zabbix通过JMX方式监控weblogic

winhex数据恢复教程（非常巨大，内容丰富）

Symantec Backup Exec 2015 2016/2012 BE20

NetScaler VPX部署之：NetScaler Gateway调

zabbix3.4.1安装部署+微信推送信息+大屏显

小猿圈web前端之JavaScript放大镜效果

浏览过的版块

扫码加入运维网微信交流群