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不仅允许您将动画设置为指定的颜色,还允许您将动画设置为随机的颜色。

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);
	});
});


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的网站添加另一种微妙的效果。

翻译自: https://davidwalsh.name/jquery-random-color-animate

jquery实现随机颜色

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐