网站搭建-给lightbox增加鼠标滚轮缩放功能

lightbox的升级版本

lightbox2 提供了一种轻量化的图片查看方案
本文是笔者在搭建网站时 通过修改lighbox.js的源码 给lightbox增加了鼠标滚轮缩放功能

代码部分

啥废话都不说 咱直接放源码

找到下面这一段:

this.$lightbox.find('.lb-loader, .lb-close').on('click keyup', function (e) {
    // If mouse click OR 'enter' or 'space' keypress, close LB
    if (
        e.type === 'click' || (e.type === 'keyup' && (e.which === 13 || e.which === 32))) {
        self.end();
        return false;
    }
});

然后回车两行
插入以下代码:

            // 图片滚轮缩放
            this.img = this.$container.find('.lb-image');
            this.label = this.$lightbox.find('.lb-dataContainer');
            $([this.$overlay[0], this.$lightbox[0]]).bind("mousewheel", function (e) {
                // 变量组
                var flag = e.originalEvent.wheelDelta < 0; // 获取滚轮方向 TRUE为上 FALSE为下
                // 这里的函数为兼容老式浏览器 使用 e.originalEvent.wheelDelta 现在你可以使用 e.deltaY
                var imgNH = self.img[0].naturalHeight; // 获取图片原始高度
                var imgNW = self.img[0].naturalWidth; // 获取图片原始宽度
                var imgH = self.img.height(); // 获取当前图片的高度
                var imgW = self.img.width(); // 获取当前图片的宽度
                var zoom = 64 // 定义缩放量
                    var nw = Math.round(zoom * imgW / imgH); // 计算宽度变化量 Math.round 用于取整 确保变化量为整数
                var ctH = self.$outerContainer.height(); // 获取外容器的当前高度
                var ctW = self.$outerContainer.width(); // 获取外容器的当前宽度
                var minH = imgNH / 10; // 设置最小缩放值为图片px值的10分之1
                var maxH = imgNH; // 设置最大缩放值为图片px值
                var minW = imgNW / 10; // 设置最小缩放值为图片px值的10分之1
                var maxW = imgNW; // 设置最大缩放值为图片px值
                // 向下滚动
                if (flag && imgH > minH && imgW > minW) {
                    self.$outerContainer.css('height', ctH - zoom); // 减小外容器的高度
                    self.$outerContainer.css('width', ctW - nw); // 减小外容器的宽度
                    requestAnimationFrame(function () {
                        self.img.css('height', ctH - zoom); // 设置图片的高度为外容器的高度
                        self.img.css('width', ctW - nw); // 设置图片的宽度为外容器的宽度
                    });
                    if (ctW - nw > (imgNW / 5) || (ctH - nw > imgNH / 5)) { // 判断外容器的宽度和高度是否大于图片原始宽度和高度的五分之一
                        self.label.css('width', ctW - zoom); // 设置数据容器的宽度为外容器的宽度减去缩放量
                    }
                    // 向上滚动
                } else if (!flag && imgH < maxH && imgW < maxW) {
                    self.$outerContainer.css('height', ctH + zoom); // 增加外容器的高度
                    self.$outerContainer.css('width', ctW + nw); // 增加外容器的宽度
                    requestAnimationFrame(function () {
                        self.img.css('height', ctH + zoom); // 设置图片的高度为外容器的高度
                        self.img.css('width', ctW + nw); // 设置图片的宽度为外容器的宽度
                    });
                    self.label.css('width', ctW + nw); // 保持数据容器的宽度与图片的宽度相适应
                }
                e.stopPropagation(); // 阻止事件冒泡
                return false;
            });
            var isScaling = false; // 滚轮缩放事件标志

            // 图片滚轮缩放
            this.img.bind("wheel", function (e) {
                isScaling = true; // 设置滚轮缩放事件标志
                // 在滚轮缩放事件处理函数的最后添加以下代码
                setTimeout(function () {
                    isScaling = false; // 清除滚轮缩放事件标志
                }, 100); // 100ms 后清除标志
            });

注意 这里有大量注释 如果你不想要 可以全部删除
总体的原理 看看注释就懂了 你也可以在此基础上添加其他功能 或精简一些代码

我后续会将魔改后的lightbox放在GitHub上开源

• 教程