十六、JS实现淘宝商品详情的放大镜效果

一、思路

1.界面由3种图片(小中大)组合而成；

2.根据小图的索引值来控制中图的切换，但是由于大图不能直接索引，所以可以通过对中图的索引值间接索引来控制大图的切换；

二、步骤

1.绘制基础界面

2.添加中图并且实现索引对索引的切换以及覆盖的放大层效果

利用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 返回当前元素相对垂直偏移位置的偏移容器

element.offsetLeft 返回当前元素相对水平偏移位置的偏移容器

注意：1.不能直接设置鼠标坐标为覆盖层的top、left值，这样覆盖层的会以其相对于浏览器窗口的左上角跟随鼠标坐标移动，所以要去除偏移量及减去一定数值使其中心跟随鼠标坐标移动；

2.需要对移动事件传参来获取鼠标坐标：e.pageX 和 e.pageY

3.需要判断并控制覆盖框的移动区域利用console.log(ceng_top)\console.log(ceng_left)测试出活动区域并判断；

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]+"')";

这里根据中图的索引值实现中图和大图的索引对索引切换；

令middle_img.index=0;来设置大图的默认图片为大图第一张；

完整代码：

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

十六、JS实现淘宝商品详情的放大镜效果

猜你喜欢