使用vue仿淘宝放大镜

使用vue做仿作淘宝商品展示放大镜

效果图

文件地址
提取码：s2yj
css代码：

    <style>
        #myApp {
    
            text-align: center;
        }
        
        #main {
    
            width: 300px;
            height: 300px;
            position: relative;
        }
        
        #main img {
    
            width: 100%;
            height: 100%;
        }
        
        #cover {
    
            width: 200px;
            height: 200px;
            background-color: rgba(255, 247, 4, 0.4);
            position: absolute;
            left: 0;
            top: 0;
            /* 让遮罩层偏移自身一般, 以中心点为坐标0, 0的位置 */
            transform: translate(-100px, -100px);
        }
        
        ul {
    
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        ul li {
    
            float: left;
            margin: 5px;
        }
        
        ul li img {
    
            width: 50px;
            height: 50px;
        }
        
        .active {
    
            border: 1px solid red;
        }
        
        main {
    
            position: relative;
        }
        
        #big {
    
            width: 400px;
            height: 400px;
            position: absolute;
            border: 1px solid red;
            left: 300px;
            top: 0;
            overflow: hidden;
        }
        
        #big img {
    
            width: 700px;