原生JavaScript实例之简单放大镜

Posted 2020-11-06 wenweitai

原生javascript实例之简单放大镜

 

放大镜效果分析：

一、选项卡效果

鼠标移入小图列表其中一张图时，小图边框效果，大盒出现对应的大图

 

 

二、放大镜效果

鼠标移入大图时，鼠标位置出现放大镜，鼠标在放大镜中心位置，大盒右边出现细节大图

 

三、范围效果

1、放大镜活动范围在大盒内

2、当鼠标离开大盒，放大镜和细节图消失

 

四、图片比例

放大镜框：大盒：细节图 = 1:2:4

 

html结构

 

<!-- 大图 -->
<div id="box">
　　<!--默认显示的大图片-->
　　<img src="imgs/1-large.jpg" class="middle" width="400" height="400">
　　<!-- 放大镜 -->
　　<div id="filter"></div>
</div>
<!-- 细节图 -->
<div id="max">
　　<img src="imgs/1-large.jpg" id="maxImg">
</div>
<!-- 小图列表 -->
<div>
　　<img src="imgs/1-small.jpg" class="small" data-url="imgs/1-large.jpg">
　　<img src="imgs/2-small.jpg" class="small" data-url="imgs/2-large.jpg">
　　<img src="imgs/3-small.jpg" class="small" data-url="imgs/3-large.jpg">
　　<img src="imgs/4-small.jpg" class="small" data-url="imgs/4-large.jpg">
　　<img src="imgs/5-small.jpg" class="small" data-url="imgs/5-large.jpg">
</div>

 

　CSS样式

 

.small {
    margin: 0 10px;
    border: 1px solid #fff;
}
.small:hover {
    border-color: #000;
}
/*放大镜定位，初始隐藏*/
#filter{
    width: 200px;
    height: 200px;
    position: absolute;
    background: #000;
    opacity: 0.5;
    left: 0;
    top: 0;
    display: none;
}
/*大盒添加相对定位*/
#box{position: relative;width: 400px}
/*细节图设置位置及绝对定位，初始隐藏*/
#max{position: absolute;left:430px;top:0;overflow: hidden;width:400px;height: 400px;}
#maxImg{width:800px;height: 800px;position: absolute; display: none;}

js

//获取所有的小图
var oSmall = document.querySelectorAll(".small");
//获取大盒的图片
var omiddle = document.querySelector(".middle");
//获取细节图
var omaxImg = document.getElementById("maxImg");
//获取放大镜
var oFilter = document.getElementById("filter");
//获取大盒
var oBox = document.getElementById("box");
//选项卡效果

//先给每个小图添加鼠标事件
for(var i=0;i<oSmall.length;i++){
//当移入当前小图时
　　oSmall[i].onmouseover = function() {
　　　　//获取当前小图的自定义属性
　　　　var src = this.getAttribute("data-url"); 
　　　　//将获取到的src赋值给大图跟细节图
　　　　omiddle.src = src;
　　omaxImg.src = src;
　　}
}


//放大镜效果
//当鼠标移入大盒子时，放大镜跟细节图显示
oBox.onmouseover = function(){
oFilter.style.display = "block";
omaxImg.style.display = "block";　　

this.onmousemove = function(e){
var e = e||event;
//鼠标位置
var l = e.clientX - oBox.offsetLeft - oFilter.offsetWidth/2;
var t = e.clientY - oBox.offsetTop - oFilter.offsetHeight/2;
//放大镜在盒子里的判断条件（三目判断）
l = l>oBox.offsetWidth - oFilter.offsetWidth?oBox.offsetWidth - oFilter.offsetWidth:(l<0?0:l);

t = t>oBox.offsetHeight - oFilter.offsetHeight?oBox.offsetHeight - oFilter.offsetHeight:(t<0?0:t);


//if判断的方法
/*if(l>oBox.offsetWidth - oFilter.offsetWidth){
l = oBox.offsetWidth - oFilter.offsetWidth
}

if(t>oBox.offsetHeight - oFilter.offsetHeight){
t = oBox.offsetHeight - oFilter.offsetHeight
}

if(l<0){
l = 0;
}

if(t<0){
t = 0;
}*/
//赋值放大镜的位置 

oFilter.style.left = l+‘px‘;
oFilter.style.top = t+‘px‘;

//赋值细节图的位置

omaxImg.style.left = -2*l+‘px‘;
omaxImg.style.top = -2*t+‘px‘;

}

}

//鼠标移出大盒后，放大镜、细节图隐藏

oBox.onmouseout = function(e){
oFilter.style.display = "none";
omaxImg.style.display = "none";
}