商城放大镜效果js实例

首先为大家展示一下实例的最终效果

首先准备静态的样式

编写HTML结构

css样式

*{
    margin: 0;
    padding: 0;
}
ol,ul,li{
    list-style: none;
}
.bigBox{
    margin: 50px;
}
img{
    width: 100%;
    height: 100%;
}
.commodityBox{
    position: relative;
}
.commodity{
    position: relative;
    width: 350px;
    height: 280px;
    margin-bottom: 6px;
    border: 1px solid gray;
}
.commodity>span{
    display: none;
    position: absolute;
    top:0;
    left: 0;
    width: 80px;
    height: 80px;
    background-color: rgba(250,250,0,.4);
    cursor:move;
}
.commodityM{
    display: flex;
    flex-direction:row;
    justify-content:space-between;
    width: 350px;
    height: 100px;
}
.commodityM>li{
    width: 24%;
}
.commodityBig{
    display: none;
    position: absolute;
    top:0;
    left: 360px;
    width: 700px;
    height: 560px;
    border: 1px solid gray;
    overflow: hidden;
}
.commodityBig>img{
    position: absolute;
    top: 0;
    left: 0;
    transform:scale(1.1);
}

网上有许多不同的插件和框架可以实现不同的效果（轮播图、选项卡、放大镜等等），工作上为了简便高效，用插件确实是不错的做法，但是在学习的过程中我觉得更应该通过原生的js去将这些常见的效果实现一遍，理解其中的原理，这样更有利于自己的进步和让自己不对插件框架等，产生过大的依赖性。