作者微信 bishe2022

智慧代码.
代码功能演示视频在页面下方,请先观看;如需定制开发,联系页面右侧客服

类似京东 淘宝商品的图方放大镜，鼠标移入展示大图

原生js实现，不依赖任何插件。

13RA07%VR]Q9T6GLOU3OY5F.png

html代码：

<body>
    <div class="container">    
        <div class="target-div">    
            <img src="imgs/cat.jpg" class="target" width="500">    
            <div class="modal"></div>    
        </div>    
    </div>    
</body>

调用方法：

new Plugin({    
    target: '.target-div',    
    url: 'imgs/cat.jpg',    
    modal: '.modal',    
    w: 600,    
    h: 600    
});

可以根据自己的需求进行调整

Home