Html 他们是如何制造这个容易出故障的容器的？

将鼠标悬停在他们用于投资组合的图像上。这个小故障对我来说真的很酷，我可以看到大量的应用程序。有人知道我如何复制它吗？我不擅长编码，但我可能理解你对我说的行话

---

有人吗？

为什么不检查他们正在使用的代码并尝试反向工程

(function($) {
    window.GlitchableImages = function(selector) {
        var base64Chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",
            base64Map = base64Chars.split(""),
            reverseBase64Map = false,
            hover_img = false,
            elSelector = selector;

        function setupReverseBase64Map() {
            reverseBase64Map = {};
            base64Map.forEach(function(val, key) {
                reverseBase64Map[val] = key
            })
        }
        function detectJpegHeaderSize(data) {
            var jpgHeaderLength = 417;
            for (var i = 0, l = data.length; i < l; i++) {
                if (data[i] == 255 && data[i + 1] == 218) {
                    jpgHeaderLength = i + 2;
                    return jpgHeaderLength
                }
            }
            return jpgHeaderLength
        }
        function base64ToByteArray(str) {
            var result = [],
                digitNum, cur, prev;
            for (var i = 23, l = str.length; i < l; i++) {
                cur = reverseBase64Map[str.charAt(i)];
                digitNum = (i - 23) % 4;
                switch (digitNum) {
                    case 1:
                        result.push(prev << 2 | cur >> 4);
                        break;
                    case 2:
                        result.push((prev & 15) << 4 | cur >> 2);
                        break;
                    case 3:
                        result.push((prev & 3) << 6 | cur);
                        break
                }
                prev = cur
            }
            return result
        }
        function byteArrayToBase64(arr) {
            var result = ["data:image/jpeg;base64,"],
                byteNum, cur, prev;
            for (var i = 0, l = arr.length; i < l; i++) {
                cur = arr[i];
                byteNum = i % 3;
                switch (byteNum) {
                    case 0:
                        result.push(base64Map[cur >> 2]);
                        break;
                    case 1:
                        result.push(base64Map[(prev & 3) << 4 | cur >> 4]);
                        break;
                    case 2:
                        result.push(base64Map[(prev & 15) << 2 | cur >> 6]);
                        result.push(base64Map[cur & 63]);
                        break
                }
                prev = cur
            }
            if (byteNum === 0) {
                result.push(base64Map[(prev & 3) << 4]);
                result.push("==")
            } else if (byteNum == 1) {
                result.push(base64Map[(prev & 15) << 2]);
                result.push("=")
            }
            return result.join("")
        }
        function glitchJpegBytes(strArr, jpgHeaderLength) {
            var rnd = Math.floor(jpgHeaderLength + Math.random() * (strArr.length - jpgHeaderLength - 4));
            strArr[rnd] = Math.floor(Math.random() * 256)
        }
        function glitchJpeg() {
            try {
                var glitchCopy = hover_img.dataArr.slice();
                for (var i = 0; i < 10; i++) {
                    glitchJpegBytes(glitchCopy, hover_img.headerLength)
                }
                var new_img = new Image;
                new_img.onload = function() {
                    if (typeof hover_img.ctx === "undefined") return;
                    hover_img.ctx.drawImage(new_img, 0, 0, hover_img.width, hover_img.height)
                };
                new_img.src = byteArrayToBase64(glitchCopy)
            } catch (e) {}
        }
        function unglitch(this_img) {
            try {
                var new_img = new Image;
                new_img.onload = function() {
                    this_img.ctx.drawImage(new_img, 0, 0, this_img.width, this_img.height)
                };
                new_img.src = byteArrayToBase64(this_img.dataArr)
            } catch (e) {}
        }
        function setupGlitchableImage(event) {
            var img = this.page_img;
            var $img = $(img);
            var $canvas = $('<canvas width="' + $img.width() + '" height="' + $img.height() + '">');
            $img.wrap('<span class="glitchable_container"></span>');
            $img.after($canvas);
            try {
                img.ctx = $canvas[0].getContext("2d");
                img.ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, $img.width(), $img.height());
                img.jpgImgData = $canvas[0].toDataURL("image/jpeg");
                img.dataArr = base64ToByteArray(img.jpgImgData);
                img.headerLength = detectJpegHeaderSize(img.dataArr)
            } catch (e) {}
        }
        function onImageMouseOver(event) {
            hover_img = $(event.target).prev("img")[0]
        }
        function onImageMouseMove(event) {
            requestAnimationFrame(glitchJpeg)
        }
        function onImageMouseOut(event) {
            unglitch(hover_img);
            hover_img = false
        }
        function resize() {
            $(".glitchable_container canvas").each(function() {
                var $img = $(this).siblings("img");
                $(this).attr("width", $img.width()).attr("height", $img.height())
            })
        }
        function init() {
            if (!reverseBase64Map) {
                setupReverseBase64Map()
            }
            $(elSelector).each(function() {
                if (this.ctx) {
                    return
                }
                this.load_img = new Image;
                this.load_img.page_img = this;
                $(this.load_img).load(setupGlitchableImage);
                this.load_img.src = this.getAttribute("src")
            });
            $("body").on("mouseover", ".glitchable_container", onImageMouseOver).on("mousemove", ".glitchable_container", onImageMouseMove).on("mouseout", ".glitchable_container", onImageMouseOut)
        }
        return {
            onResize: resize,
            init: init
        }
    }
})(jQuery);

（函数（$）{
window.GlitchableImages=函数（选择器）{
var base64Chars=“abcdefghijklmnopqrstuvxyzabcdefghijklmnopqrstuvxyz012456789+/”，
base64Map=base64Chars.split（“”），
reverseBase64Map=false，
hover_img=false，
elSelector=选择器；
函数setupReverseBase64Map（）{
reverseBase64Map={}；
base64Map.forEach（函数（val，key）{
reverseBase64Map[val]=键
})
}
函数检测JPEGHeaderSize（数据）{
var jpgHeaderLength=417；
对于（变量i=0，l=data.length；i4）；
打破
案例2：
结果：推送（（上一个&15个）>2）；
打破
案例3：
结果：推送（（上一个&3个）>2]）；
打破
案例1：
结果：推送（base64Map[（prev&3）>4]）；
打破
案例2：
结果：推送（base64Map[（prev&15）>6]）；
结果推送（base64Map[cur&63]）；
打破
}
prev=cur
}
if（byteNum==0）{
结果。推送（base64Map[（上一个和第三个）请不要放弃投票，不要给出理由。这个问题是对所用技术的有效调查，尽管它非常自由和通用。那么，我对JQuery完全是新手。我该如何实现这样的代码，或者以其他方式使用它？希望我对该网站不是太新手。只是真的想了解这一切是如何工作的！可能有点adva对于刚钻研jQuery的人来说，这是一个不错的选择，但基本上你需要将上面的函数添加到一个javascript文件中，并将该文件包含在你的HTML中。你还需要更改javascript函数中的DIV id/类，以匹配你自己的DIV（或者只是使用他们正在使用的相同id/类创建你的DIV）。