图片放大镜jquery.elevatezoom踩坑记录

图片放大镜jquery.elevatezoom踩坑记录

感谢插件提供者。

运行场景：

点击小图切换大图，并且大图可以放大镜

最终代码

html结构

<div class="show_img">
                <img src="/static/img/004.jpg" alt="" id="zoom_01" data-zoom-image="/static/img/004.jpg">
                <div class="magnify">
                    <i class="iconfont icon-magnify"></i>
                </div>
            </div>
            <ul class="img_list">
                <li data-src="/static/img/001.jpg" data-sub-html="公司大门">
                    <a href="javascript:;" data-zoom-image="/static/img/001.jpg" class="active">
                        <div class="img">
                            <img src="/static/img/001.jpg" alt="">
                        </div>
                    </a>

                </li>

                <li data-src="/static/img/002.jpg" data-sub-html="公司大门">
                    <a href="javascript:;" data-zoom-image="/static/img/001.jpg">
                        <div class="img">
                            <img src="/static/img/002.jpg" alt="">
                        </div>
                    </a>

                </li>

                <li data-src="/static/img/003.jpg" data-sub-html="公司大门">
                    <a href="javascript:;" data-zoom-image="/static/img/001.jpg">
                        <div class="img">
                            <img src="/static/img/003.jpg" alt="">
                        </div>
                    </a>

                </li>

                <li data-src="/static/img/004.jpg" data-sub-html="公司大门">
                    <a href="javascript:;" data-zoom-image="/static/img/001.jpg">
                        <div class="img">
                            <img src="/static/img/004.jpg" alt="">
                        </div>
                    </a>

                </li>
            </ul>

let imgs = $('.img_list>li').each(function (index,item){
    $(this).on('click',function (){
        $('.show_img img')[0].src = $(this).find('img')[0].src;
        $('#zoom_01').data('zoomImage',$(this).find('img')[0].src);
        $(this).addClass("active").siblings().removeClass("active");
        $('.zoomContainer').remove();

    })
})

坑点记录

1. 原生和jq的差距 ，这是一个核心问题，在图片切换中用原生替换了放大镜dom里的data值，f12生效，但是实际没生效，用jq打印竟然是原始值，我都惊呆了

$('#zoom_01').data('zoomImage')

2.实现思路，放大镜dom鼠标移动才可以执行函数，点击图片切换将放大镜函数生成出来的dom给移除掉，然后鼠标移上去之后又会产生一个新的放大镜dom
3. 因为jq不是很熟悉，插件是jq写的，无法更改

来源网络，奉献网络，热爱编程