jquery实现随机颜色_jQuery随机链接颜色动画-蒲公英云

jquery实现随机颜色_jQuery随机链接颜色动画

叁歲伎倆 2023-02-22 01:24 124阅读 0赞

jquery实现随机颜色

We all know that we can set a link’s :hover color, but what if we want to add a bit more dynamism and flair? jQuery allows you to not only animate to a specified color, but also allows you to animate to a random color.

大家都知道我们可以设置链接的：hover颜色，但是如果我们想增加一点动感和个性呢？ jQuery不仅允许您将动画设置为指定的颜色，还允许您将动画设置为随机的颜色。

View Demo 观看演示

jQuery JavaScript (The jQuery JavaScript)

$(document).ready(function() {
    var randomLinks = $('a.random-color');
    var original = randomLinks.css('color');
    randomLinks.hover(function() { //mouseover
        var col = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
        $(this).animate({
            'color': col,
            'paddingLeft': '20px'
        },1000);
    },function() { //mouseout
        $(this).animate({
            'color': original,
            'paddingLeft': '0'
        },500);
    });
});

View Demo 观看演示

For the color animation portion, you’ll need an extra Color Animations jQuery plugin. The padding nudge is another neat effect. This effect isn’t for everyone, but it can add another subtle effect to your jQuery-enabled website.

对于彩色动画部分，您将需要一个额外的Color Animations jQuery插件。填充微调是另一个很好的效果。这种效果并不适合所有人，但可以为启用jQuery的网站添加另一种微妙的效果。