web前端-实现淘宝商品放大镜下面小图的hover样式

效果图如下: (点击这里查看示例Demo)

鼠标hover样式设置

首先说下淘宝下面的这个图的 hover 和其他的有什么不一样, 是这样的, 当鼠标移动到上面的时候, 图片会保持原来大小, 盒子整体不会发生位置的变化. 下面我来一步一步实现这个效果

只做简单的例子

首先布局

<div class="container">
    <div class="box" id='box'>
        ![](https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490231203&di=6ecdc9dd67ae9662cc08fc82218c1cb8&imgtype=jpg&er=1&src=http%3A%2F%2Ft1.niutuku.com%2F960%2F21%2F21-262743.jpg)
    </div>
</div>

样式

.container{
    border:1px solid;
}
.container .box{
    width: 400px;
    height: 400px;
}
.container .box img{
    width: 400px;
    height: 400px;
}
/*当添加上 active 的时候, 给box 的border添加边框, 加了边框之后宽度变成了410, */
/*所以要减去变宽的宽度, 所以要把宽和高修改成390, 并且需要把图片超出的部分隐藏, */
/*所以要 overflow:hidden;*/
.container .box.active{
    border:5px solid #f00;
    width: 390px;
    height: 390px;
    overflow:hidden;
}
/* 为了保持图片的位置不变, 需要给图片设置定位属性(相对定位, 因为要保持图片在标准流中的位置), */
/*再使用 top 和 left 将图片微调即可 */
.container .box.active img{
    position: relative;
    top: -5px;
    left: -5px;
}

js 脚本

window.onload = function(){
    var box = document.getElementById('box');
    box.onmouseover = function(){ // 鼠标移入的时候将 box 的 className 改成'box active'
        this.className = 'box active';
    }
    box.onmouseout = function(){
        this.className = 'box'; // 移除之后还原
    }
}

Demo地址