1.界面由3种图片(小中大)组合而成;
2.根据小图的索引值来控制中图的切换,但是由于大图不能直接索引,所以可以通过对中图的索引值间接索引来控制大图的切换;
二、步骤
<div class="block">
<div class="big"></div>
<div class="middle">
<img class="middle_img" src="" alt="">
<div class="ceng"></div>
</div>
<div class="small">
<img class="small_img" src="./image/tinyimage.jpg" alt="">
<img class="small_img" src="./image/tinyimage-1.jpg" alt="">
<img class="small_img" src="./image/tinyimage-2.jpg" alt="">
</div>
</div>
2.添加中图并且实现索引对索引的切换以及覆盖的放大层效果
<script>
window.onload=function(){
/*中图大图存储在数组中*/
var bigimg=["bigimage00.jpg","bigimage01.jpg","bigimage02.jpg"];
var middleimg=["smallimage.jpg","smallimage-1.jpg","smallimage-2.jpg"];
/*添加中图并实现切换*/
var middle=document.getElementsByClassName("middle")[0];
var middle_img=document.getElementsByClassName("middle_img")[0];
middle_img.src="./image/"+middleimg[0];
var small_img=document.getElementsByClassName("small_img");
for(var i=0;i<small_img.length;i++){
small_img[i].index=i;
small_img[i].onclick=function(){
/*this.index=i;*/
middle_img.src="./image/"+middleimg[this.index];
middle_img.index=this.index;
}
}
}
</script>
利用small_img[i].index=i;得到小图的索引,middle_img.src="./image/"+middleimg[this.index];
这里this.index就等于small_img[i].index=i;即实现索引对索引;middle_img.index=this.index;
这个是中图的索引,实习控制大图的对应切换;
3.实现鼠标进入、离开以及移动的中图部分事件;
首先鼠标进入时,覆盖层及大图显示区会出现,鼠标离开隐藏,鼠标移动时覆盖层跟随鼠标坐标移动;(利用鼠标坐标以及容器偏移量设置覆盖层的top及left值)
知识点:onmouseenter() 鼠标进入事件
onmouseleave() 鼠标离开事件 (指的是水平的离开)
onmouseout() 鼠标离开事件 (指的是水平和垂直的离开)
onmousemove() 鼠标移动事件
page 获取鼠标的坐标
element.offsetTop 返回当前元素相对垂直偏移位置的偏移容器
注意:1.不能直接设置鼠标坐标为覆盖层的top、left值,这样覆盖层的会以其相对于浏览器窗口的左上角跟随鼠标坐标移动,所以要去除偏移量及减去一定数值使其中心跟随鼠标坐标移动;
2.需要对移动事件传参来获取鼠标坐标:e.pageX 和 e.pageY
3.需要判断并控制覆盖框的移动区域 利用console.log(ceng_top)\console.log(ceng_left)测试出活动区域并判断;
var ceng=document.getElementsByClassName("ceng")[0];
middle.onmouseenter=function(){
ceng.style.display="block";
big.style.display="block";
}
middle.onmouseleave=function(){
ceng.style.display="none";
big.style.display="none";
}
/*鼠标移动事件*/
middle.onmousemove=function(e){
//根据鼠标位移控制覆盖层的移动top left值
//判断覆盖层活动区域
var ceng_top=(e.pageY-this.offsetTop-300)<-265?-265:(e.pageY-this.offsetTop-300)>-20?-20:(e.pageY-this.offsetTop-300);
var ceng_left=(e.pageX-this.offsetLeft-290)<-260?-260:(e.pageX-this.offsetLeft-290)>-60?-60:(e.pageX-this.offsetLeft-290);
/*console.log(ceng_left);*/
ceng.style.top=ceng_top+"px";
ceng.style.left=ceng_left+"px";
}
4.添加大图并且实现索引对索引的切换,以及跟随移动
大图设置为big框的背景图片,改变背景图片的位置实现移动效果;
注意:大图的移动与覆盖层移动是相反的方向;
/* 控制大图的移动*/
big.style.backgroundPosition=(-e.pageX*1.2)+"px "+(-e.pageY*1.8)+"px";
这里需要注意第一个px之后要加一个空格,因为背景位移的x y轴需要用空格隔开;
big.style.backgroundImage="url('./image/"+bigimg[middle_img.index]+"')";
这里根据中图的索引值实现中图和大图的索引对索引切换;
完整代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>淘宝放大镜</title> <style> *{margin: 0;padding: 0;} .block{ width: 300px; height: 460px; border: 1px solid black; position: relative; } .big{ width: 400px; height: 460px; border: 1px solid red; position: absolute; top: -1px; left: 300px; display: none; background-repeat:no-repeat; } .middle{ width:260px; height: 320px; border: 1px solid red; margin: 15px auto; position: relative; overflow: hidden; } .middle_img{ width: 100%; } .ceng{ width:60px; height: 80px; border: 260px solid rgba(128, 128, 128, 0.5); position: absolute; top: 0; left:0; display: none; } .small{ width: 260px; height: 96px; margin: 0 auto; } .small_img{ width: 60px; margin: 5px 10px; border: 1px solid black; } </style> <script> window.onload=function(){ /*中图大图存储在数组中*/ var bigimg=["bigimage00.jpg","bigimage01.jpg","bigimage02.jpg"]; var middleimg=["smallimage.jpg","smallimage-1.jpg","smallimage-2.jpg"]; /*添加中图并实现切换*/ var big=document.getElementsByClassName("big")[0]; var middle=document.getElementsByClassName("middle")[0]; var middle_img=document.getElementsByClassName("middle_img")[0]; middle_img.src="./image/"+middleimg[0]; var small_img=document.getElementsByClassName("small_img"); for(var i=0;i<small_img.length;i++){ small_img[i].index=i; small_img[i].onclick=function(){ /*this.index=i;*/ middle_img.src="./image/"+middleimg[this.index]; middle_img.index=this.index; } } /*鼠标移入事件*/ var ceng=document.getElementsByClassName("ceng")[0]; /*设置大图默认值*/ middle_img.index=0; middle.onmouseenter=function(){ ceng.style.display="block"; big.style.display="block"; big.style.backgroundImage="url('./image/"+bigimg[middle_img.index]+"')"; } middle.onmouseleave=function(){ ceng.style.display="none"; big.style.display="none"; } /*鼠标移动事件*/ middle.onmousemove=function(e){ //根据鼠标位移控制覆盖层的移动top left值 //判断覆盖层活动区域 var ceng_top=(e.pageY-this.offsetTop-300)<-265?-265:(e.pageY-this.offsetTop-300)>-20?-20:(e.pageY-this.offsetTop-300); var ceng_left=(e.pageX-this.offsetLeft-290)<-260?-260:(e.pageX-this.offsetLeft-290)>-60?-60:(e.pageX-this.offsetLeft-290); /*console.log(ceng_left);*/ ceng.style.top=ceng_top+"px"; ceng.style.left=ceng_left+"px"; /* 控制大图的移动*/ big.style.backgroundPosition=(-e.pageX*1.2)+"px "+(-e.pageY*1.6)+"px"; } } </script> </head> <body> <div class="block"> <div class="big"></div> <div class="middle"> <img class="middle_img" src="" alt=""> <div class="ceng"></div> </div> <div class="small"> <img class="small_img" src="./image/tinyimage.jpg" alt=""> <img class="small_img" src="./image/tinyimage-1.jpg" alt=""> <img class="small_img" src="./image/tinyimage-2.jpg" alt=""> </div> </div> </body> </html>