优快云开发助手，开发随机展现图片，百行代码落地JS插件

原创已于 2022-02-16 17:00:51 修改 · 1.9w 阅读

0 ·

CC 4.0 BY-SA版权

梦想橡皮擦-独家版权，禁止转载

文章标签：

#javascript #前端 #ecmascript #优快云开发者助手 #优快云插件

于 2022-02-11 08:17:12 首次发布

精彩技术文专栏收录该内容

254 篇文章

订阅专栏

本文介绍了如何制作一个简单的全站闪图插件，通过三步实现图片随机显示并动态变换位置。首先，准备可访问的云端图片库，然后生成DOM对象插入到页面，最后设置定时器随机更改图片位置和URL，为优快云站点增添趣味性。点击图片可跳转至指定链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

插件落地目标

当你访问优快云站点的时候，不时的出现【快乐图片~】

实现效果图在评论区

该插件制作比较简单，只需要3步即可实现。

第一步：准备一堆图片，并上传到可访问的云端，然后随机选择一张图片；
第二步：生成一个DOM对象，追加到目标站点；
第三步：设置间隔时间，对 IMG DOM 对象的坐标进行随机变更。

准备图片的过程
如果你自己有云服务器，直接上传开启访问即可，如果没有，也可以使用下述办法，将图片上传到某些博客编辑器中，然后拷贝其地址。

var images = ['https://可访问的图片地址/29dfd87bd4cb44b7a776b6555a3c04c4~tplv-k3u1fbpfcp-watermark.image',
    'https://可访问的图片地址/23778de166314b6fb1cff387f9979e5c~tplv-k3u1fbpfcp-watermark.image',
    'https://可访问的图片地址/33e222cb2a234253a04975e2b42d4e5e~tplv-k3u1fbpfcp-watermark.image',
    'https://可访问的图片地址/31f2dba4392a45daac34aa6dc72449b1~tplv-k3u1fbpfcp-watermark.image',
    'https://可访问的图片地址/873bc89f5c6142f393d1e401f5565795~tplv-k3u1fbpfcp-watermark.image',
    'https://可访问的图片地址/8d42df68553f4eb588402a2cc04c4a02~tplv-k3u1fbpfcp-watermark.image',
    'https://可访问的图片地址/a6e8b6d7fb6b40e78a92613bfffcc6e9~tplv-k3u1fbpfcp-watermark.image',
    'https://可访问的图片地址/4c710a331f55401980c8920efb6d856f~tplv-k3u1fbpfcp-watermark.image',
    'https://可访问的图片地址/8c1de95a95674671978aa4a46c398a97~tplv-k3u1fbpfcp-watermark.image',
    'https://可访问的图片地址/09197a2474954974bf14a6284c98de1d~tplv-k3u1fbpfcp-watermark.image',
    'https://可访问的图片地址/61b2855e19194757838997b1121c1632~tplv-k3u1fbpfcp-watermark.image',
    'https://可访问的图片地址/449db3e32b87441487cd2a581f7192d7~tplv-k3u1fbpfcp-watermark.image',
    'https://可访问的图片地址/7b93571139a8477295f67e385721c66a~tplv-k3u1fbpfcp-watermark.image',
    'https://可访问的图片地址/ee52a91d9dba4f7587bcf4f9ffb3f154~tplv-k3u1fbpfcp-watermark.image',
    'https://可访问的图片地址/3a2312baf76c47dd88e6769125cf3a4e~tplv-k3u1fbpfcp-watermark.image',
    'https://可访问的图片地址/fb5c4666930d4ae98f04942e9ff595b4~tplv-k3u1fbpfcp-watermark.image',
    'https://可访问的图片地址/903ad0c5b30e4b0b859b205c48ac43cd~tplv-k3u1fbpfcp-watermark.image',
    'https://可访问的图片地址/86c4574dc434479cbb2a9b4793f156ba~tplv-k3u1fbpfcp-watermark.image',
    'https://可访问的图片地址/a532b7292329481ab7a6197d8f4705f3~tplv-k3u1fbpfcp-watermark.image',
    'https://可访问的图片地址/0d88b6cf8f9e4bdfb4296674e61c4add~tplv-k3u1fbpfcp-watermark.image',
    'https://可访问的图片地址/0c435394e0974b13aa11def71116bf95~tplv-k3u1fbpfcp-watermark.image',
    'https://可访问的图片地址/645d11fbb7154956adc2875454fec7a5~tplv-k3u1fbpfcp-watermark.image',
    'https://可访问的图片地址/66c761ae76c84e22a3fe2019f8523229~tplv-k3u1fbpfcp-watermark.image',
    'https://可访问的图片地址/c87405b9137247a0a705209be2e95249~tplv-k3u1fbpfcp-watermark.image',
    'https://可访问的图片地址/fc10198c922948c6911b70d886e6aa93~tplv-k3u1fbpfcp-watermark.image'
];
var url = images[Math.floor(Math.random() * images.length)];

上述代码可以随机选择一个图片地址，用于后续 IMG 对象。

生成DOM对象的过程
拿到图片地址之后，就可以将其绑定到一个DOM对象中，该步骤的实现代码如下所示：

var img = $('<img>');
img.attr('src', url);
img.css('cursor')
img.on('click', function() {
    location.href = 'https://blog.youkuaiyun.com/hihell';
})
$('body').append(img);

此时你的图片只能出现在固定位置，我们还需要将其进行随机变化，时间间隔测试的过程中可以设置为1秒。

$(function() {
    var img = $('<img>');
    img.css('cursor')
    img.on('click', function() {
        location.href = 'https://blog.youkuaiyun.com/hihell';
    })
    $('body').append(img);
    // 随机数函数
    function sj(x, y) {
        var rand = parseInt(Math.random() * (x - y + 1) + y);
        return rand
    }
    setInterval(function() {
        var images = ['图片地址数组'];
        var url = images[Math.floor(Math.random() * images.length)];
        img.attr('src', url);
        var left_x = sj(100, 1200) + 'px';
        var top_x = sj(100, 800) + 'px';
        var width = '136px';
        img.css({
            "position": "absolute",
            "left": left_x,
            "top": top_x,
            'width': width,
            zIndex: 9999,
            'cursor': 'pointer'
        });
    }, 1000);
});