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

Posted 2022-02-23 梦想橡皮擦

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSDN开发助手，开发随机展现图片，百行代码落地JS插件相关的知识，希望对你有一定的参考价值。

插件落地目标

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

实现效果图在评论区

该插件制作比较简单，只需要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.csdn.net/hihell';
)
$('body').append(img);

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

$(function() 
    var img = $('<img>');
    img.css('cursor')
    img.on('click', function() 
        location.href = 'https://blog.csdn.net/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);
);