文章 - Vue实现商品信息轮播+放大镜效果

分享一个刚写做出来的demo吧，公司的下一个项目是开发一个商城网站，然后我现阶段是在做一些准备工作，但是完！全！不！知！道！改怎么准备啊！！！然后就想着先写一些demo好了，求大神指点一二！感谢。html 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
        <meta http-equiv="Cache-Control" content="no-transform"/>
        <meta http-equiv="Cache-Control" content="no-siteApp"/>
        <meta name="renderer" content="webkit"/>
        <meta name="author" content="钟李俊"/>
        <title>商品详情轮播+放大镜</title>
        
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
        
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        <script src="https://cdn.bootcss.com/zepto/1.1.6/zepto.js"></script>

.gallery{
                width: 400px;
                height: 400px;
                float: left;
                border: 1px solid red;
                margin-right:5px ;
                position: relative;
            }
            .content{
                float: left;
                width: 800px;
                height: 500px;
            }
            .min-gallery{
                position: absolute;
                left: 10px;
                bottom: 10px;
                width: 400px;
                height: 80px;
                border: 1px solid red ;
            }

.el-carousel__indicators--outside{
                margin-top: 20px;
                height: 80px;
            }

/*蒙版*/
            #gallery-mask{
                width: 175px;
                height: 175px;
                background: #9ABCF2;
                opacity: 0.5;
                position: absolute;
                left: 0px;
                top: 0px;
                z-index: 10;
                /*display: none;*/
            }
            .el-carousel__item img{
                background-size: 400px 400px;
            }
            #max-gallery{
                width: 400px;
                height: 400px;
                border: 1px solid red;
                position: absolute;
                left: 420px;
                top: 10px;
                overflow: hidden;
                /*display: none;*/
            }
            .el-carousel__indicators--outside button{
                width: 78px;
                height:78px;
                background: url(../vue1/src/assets/logo.png) 0px 0px no-repeat;
                background-size: 80px 80px;
                opacity: 1;
                box-sizing: border-box;
            }
            .el-carousel__indicator{
                padding: 0px;
                margin:0px 5px;
                box-sizing: border-box;
            }
            .el-carousel__indicator.is-active{
                border: 1px solid red;
            }
            .el-carousel{
                overflow-y:hidden ;
            }
            #max-gallery img{
                position:absolute;
                left: 0px;
                top: 0px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div class="shell">
                <div class="gallery">
                    <el-carousel height="400px" :autoplay="false" arrow="never" indicator-position="outside">
                        <el-carousel-item v-for="item in Gallery" :key="item">
                            <img :src="item.src" @mouseenter.stop="enter($event.target),isshow()" @mousemove.stop="move($event)" @mouseleave.stop="leave()"/>
                        </el-carousel-item>
                    </el-carousel>
                    <p id="gallery-mask" @mouseenter.stop="isshow()" @mousemove.stop="move($event)" @mouseleave.stop="leave()" v-show = "istrue" v-bind:style="{top:maskTop +'px' , left:maskLeft +'px'}"></p>
                </div>
                <div id="max-gallery"  v-show = "istrue">
                    <img :src="Gallery[max_index].maximg"  v-bind:style="{top:-maxTop +'px' , left: -maxLeft +'px'}"/>
                </div>
                <div class="content">
                    <img src="msg.png"/>
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        var vm=new Vue({
            el:"#app",
            data:{
                Gallery:[
                    {
                        src:"https://gd1.alicdn.com/imgextra/i4/1998529822/TB2p7NtoXXXXXabXXXXXXXXXXXX_!!1998529822.jpg_400x400.jpg_.webp",
                        minimg:"http://gd1.alicdn.com/imgextra/i4/1998529822/TB2p7NtoXXXXXabXXXXXXXXXXXX_!!1998529822.jpg_80x80.jpg_.webp",
                        maximg:"http://gd1.alicdn.com/imgextra/i4/1998529822/TB2p7NtoXXXXXabXXXXXXXXXXXX_!!1998529822.jpg_800x800.jpg_.webp"
                    },
                    {
                        src:"https://gd1.alicdn.com/imgextra/i8/TB1dPdTJVXXXXXvXFXXYXGcGpXX_M2.SS2_400x400.jpg_.webp",
                        minimg:"https://gd1.alicdn.com/imgextra/i8/TB1dPdTJVXXXXXvXFXXYXGcGpXX_M2.SS2_80x80.jpg",
                        maximg:"https://gd1.alicdn.com/imgextra/i8/TB1dPdTJVXXXXXvXFXXYXGcGpXX_M2.SS2_800x800.jpg_.webp"
                    },
                    {
                        src:"https://gd1.alicdn.com/imgextra/i3/TB13lVLJVXXXXXbXVXXYXGcGpXX_M2.SS2_400x400.jpg_.webp",
                        minimg:"http://gd1.alicdn.com/imgextra/i3/TB13lVLJVXXXXXbXVXXYXGcGpXX_M2.SS2_80x80.jpg",
                        maximg:"https://gd1.alicdn.com/imgextra/i3/TB13lVLJVXXXXXbXVXXYXGcGpXX_M2.SS2_800x800.jpg_.webp"
                    },
                    {
                        src:"https://img.alicdn.com/bao/uploaded/i1/TB1SXWWPpXXXXavXXXXXXXXXXXX_!!0-item_pic.jpg_430x430q90.jpg",
                        minimg:"http://img.alicdn.com/bao/uploaded/i1/TB1SXWWPpXXXXavXXXXXXXXXXXX_!!0-item_pic.jpg_80x80q90.jpg",
                        maximg:"https://img.alicdn.com/bao/uploaded/i1/TB1SXWWPpXXXXavXXXXXXXXXXXX_!!0-item_pic.jpg_800x800q90.jpg"
                    }
                ],
                max_index : 0 ,
                maxLeft : 0 ,
                maxTop : 0 ,
                maskLeft : 0,
                maskTop : 0,
                istrue : false
            },
            mounted :function(){
                var vm=this;
                (function minimg(){
                    var btns=document.getElementsByClassName("el-carousel__button");
                    //给btn的背景赋值
                    setTimeout(function(){
                        for(var i = 0;i < btns.length;i++){
                            btns[i].style.background="url("+vm.Gallery[i].minimg+")";
                        }
                    })
                })();
            },
            methods:{
                isshow:function(){
                    this.istrue = true ;
                },
                enter:function(target){
                    this.max_index=$(target).parent().index();
                },
                move:function(ev){
//                  debugger;
                    var vm=this;
                    var min_box = document.getElementsByClassName('gallery')[0];
                    var max_box = document.querySelectorAll("#max-gallery img")[0];
                    var Mask = document.getElementById('gallery-mask');
                    var e=ev||window.event;
                    var MaskW=e.clientX-vm.offset(min_box).left-Mask.offsetWidth/2;
                    var MaskH=e.clientY-vm.offset(min_box).top-Mask.offsetHeight/2;
                    var MaskT=min_box.offsetHeight-Mask.offsetHeight;
                    var MaskL=min_box.offsetWidth-Mask.offsetWidth;
                    if (MaskW<0) {
                        MaskW=0;
                    }else if (MaskW>=MaskL) {
                        MaskW=MaskL;
                    }
                    if (MaskH<0) {
                        MaskH=0;
                    }else if(MaskH>=MaskT){
                        MaskH=MaskT;
                    }
                    vm.maskLeft=MaskW;
                    vm.maskTop=MaskH;
                    var bili=max_box.offsetWidth/(min_box.offsetWidth+vm.offset(min_box).top);
                    vm.maxLeft = MaskW*bili;
                    vm.maxTop = MaskH*bili;
                },
                leave:function(){
                    this.istrue = false ;
                },
                offset:function (obj){
//                  debugger;
                    var i=0,j=0;
                    while (obj){
                        i+=obj.offsetLeft;
                        j+=obj.offsetTop;
                        obj=obj.offsetParent;
                    }
                    return{left:i,top:j};
                }
            }
        })
    </script>
</html>

Vue实现商品信息轮播+放大镜效果

评论 ( 6 )

最新评论

Vue实现 商品信息轮播+放大镜效果

评论 ( 6 )

最新评论

欢迎您回来

创建账号

找回密码

Vue实现商品信息轮播+放大镜效果