您的位置：首页 > Ajax > jQuery 链接变色

jQuery 链接变色

发表于 10. Dec, 2008, 分类: Ajax , 1 条评论 »
标签： &

我们都知道，我们可以设置一个链接的“:hover”颜色，但如果我们要添加更多的花样呢？ jQuery可以让你不仅指定一种特定的颜色，而且还可以让你添加（动态显示）一组随机的颜色。

$(document).ready(function() {
    original = $('a.random-color').css('color');
    $('a.random-color').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);
    });
});

对于彩色动画部分，您需要额外的彩色动画jQuery插件。动画链接是另一个简洁的效果。这种效果并不适合每个人，但它可以为你的使用jQuery的网站添加另一个微妙的滑动效果。

点击这里 查看演示。

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

转载请注明来源，谢谢。

作者: 神飞
爱好前端设计与开发，崇尚一目了然的设计。现居深圳。 Follow me on twitter @qianduan。
如果你喜欢本文，欢迎 订阅本站 以获得本站最新内容。

您或许也会喜欢：

1个评论

  • Maple_Shaw 发表于Aug 12, 2011 at 10:52

    你好~~我还没接触过jquery，但是需要使用这些代码，请问加上这些代码后需要在html或者css里面更改什么吗？random-color应该是一个类名吧~~~

    回复

发表评论