使用vue仿淘宝放大镜

最新推荐文章于 2023-09-23 17:32:36 发布

web小谢

最新推荐文章于 2023-09-23 17:32:36 发布

阅读量596

点赞数 1

分类专栏：前端 vue 文章标签： vue js html javascript vue.js

本文链接：https://blog.csdn.net/qq_51050856/article/details/116675847

版权

本文档介绍如何使用Vue.js来实现类似淘宝的商品展示放大镜效果，包括效果图展示及必要的CSS和JavaScript代码。

摘要由CSDN通过智能技术生成

使用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;