JavaScript怎么实现淘宝网图片的局部放大功能

JavaScript怎么实现淘宝网图片的局部放大功能

这篇“JavaScript怎么实现淘宝网图片的局部放大功能”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“JavaScript怎么实现淘宝网图片的局部放大功能”文章吧。

要实现的效果如下：

    
    
    
        
*{            margin: 0;            padding: 0;        }        
.box{            position: relative;            width: 300px;            
height: 200px;            background: url("./JS封面.jpg");            
/*设置背景图尺寸大小*/            background-size: 300px 200px;        }        
.slider{            position: absolute;            width: 100px;            
height: 100px;            background: black;            
/*设置透明度0~1，0是全透明。*/            opacity: 0.3;        }        
.small{            position: absolute;            width: 100px;            
height:100px;            background: url('./JS封面.jpg');            top: 0px;            right: -300px; 

           background-size: 300px 200px;            /*让元素放大，scale(3)指宽高同时放大3倍。*/            transform: scale(3);        }