封装了一个电商放大镜移入放大的功能,适用于VUE

Posted fanyee

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了封装了一个电商放大镜移入放大的功能,适用于VUE相关的知识,希望对你有一定的参考价值。

代码地址:https://github.com/zhongqiulan/jqimgzoom

 由于vue只支持ie9以上版本,所以这个插件也是一样的

效果图:

第一步,在goodsinfo文件中引入css

<style scoped>
@import "../../statics/site/js/jqueryplugins/jqimgzoom/css/magnifier.css";
</style>

 第二步,在goodsinfo.vue文件中写一些html结构

<div class="magnifier" id="magnifier1">

    <div class="magnifier-container">
        <div class="images-cover"></div>
        <!--当前图片显示容器-->
        <div class="move-view"></div>
        <!--跟随鼠标移动的盒子-->
    </div>
    <div class="magnifier-assembly">
        <div class="magnifier-btn">
            <span class="magnifier-btn-left">&lt;</span>
            <span class="magnifier-btn-right">&gt;</span>
        </div>
        <!--按钮组-->
        <div class="magnifier-line">
            <ul class="clearfix animation03">
                <li>
                    <div class="small-img">
                        <img src="images/1.png" />
                    </div>
                </li>
                <li>
                    <div class="small-img">
                        <img src="images/2.png" />
                    </div>
                </li>
                <li>
                    <div class="small-img">
                        <img src="images/3.png" />
                    </div>
                </li>
                <li>
                    <div class="small-img">
                        <img src="images/4.png" />
                    </div>
                </li>
                <li>
                    <div class="small-img">
                        <img src="images/1.png" />
                    </div>
                </li>
            </ul>
        </div>
        <!--缩略图-->
    </div>
    <div class="magnifier-view"></div>
    <!--经过放大的图片显示容器-->

</div>

第三步:在goodsinfo.vue文件中导入js

 备注(其实是需要导入jquery的,但是我已经在main里导入了,所以在这里就不导入了)

<script>
import "../../statics/site/js/jqueryplugins/jqimgzoom/js/magnifier.js";
</script>

 第四步:在goodsinfo.vue文件中初始化插件

<script>
updated() {
setTimeout(() => {
$("#magnifier1").imgzoon({ magnifier: "#magnifier1" });
}, 200);
}
</script>

至此,搞定啦,有木有非常简单呢,吃饭去吧

以上是关于封装了一个电商放大镜移入放大的功能,适用于VUE的主要内容,如果未能解决你的问题,请参考以下文章

vue实战——商品放大镜组件封装及效果实现

vue实战——商品放大镜组件封装及效果实现

Vue实现商品放大镜效果

鼠标移入放大图片预览效果实现

用JS做一个简单的电商产品放大镜功能

电商网站的放大镜功能