jQuery图像放大镜效果插件（BUP.js）

演示  website 下载

插件介绍

这是一款非常简单的图像缩放插件，使用放大镜的效果将图像的一部分放大。在网页中，用户可以通过鼠标移动来查看部分图像（如产品）的详细信息。

使用方法

1. 在html页面中加载jquery库和BUP.js插件文件。

<script src="jquery.slim.min.js"></script>
<script src="BUP.js"></script>

2. 设置放大倍数

<img src="1.jpg" class="example" />
// 1x
$('.example').BUP(null, 1);

// 2x
$('.example').BUP(null, 0.5);

// 3x
$('.example').BUP(null, 1.5);

3. 可以将放大镜效果应用于多个图像，如下所示。

<img src="1.jpg" class="example1" />
<img src="2.jpg" class="example2" />
// 2x
$('.example1').BUP('example2', 0.5);

4. 设置放大镜效果的默认样式。

var defaults = {
    round: true,
    width: 200, 
    height: 200, 
    background: '#FFF',
    shadow: '0 8px 17px 0 rgba(0, 0, 0, 1)', 
    border: '6px solid #FFF', 
    cursor: true,
    zIndex: 999999,
}