利用jqueryColor实现背景颜色动态变化

因为没有演示站或者可以演示的地方，所以先来看看几张图片吧。

第一张是正常显示效果，下面三张是鼠标放到导航上面时候的颜色，颜色随机，我设置了赤橙红绿青蓝紫7个颜色，然而太多了，就只拿这几个做演示。大概效果就是这样。哦对了，变色的时候，是渐变的，效果还是挺不错的哦，下面来看看代码：

首先在header里面引入jqueryColor.js文件。

<script src="{$host}zb_users/theme/{$theme}/script/jqueryColor.js" type="text/javascript"></script>

然后新建一个js文件，把下面代码复制进去：

jQuery(document).ready(function(a) {
var rbgB=['#FF0000','#FF8000','#F9F900','#28FF28','#8CEA00','#00FFFF','#6C3365'];
    a('#nav').on('mouseover','#navs',function(){
        var random=Math.floor(Math.random() * 5);
        a(this).stop(true).animate({'backgroundColor':rbgB[random]},1000);
    });
    a('#nav').on('mouseout','#navs',function(){
        a(this).stop(true).animate({'backgroundColor':'#333333'},1000);
    });
});

这个新建的JS文件，依旧是在header里面引入，方法如上。

说明：当ID为nav的模版下的ID为navs有鼠标经过的时候，navs的背景颜色即为随机的rbgB中7种颜色之一。

对应你模版的导航里面的ID或者类，进行修改即可。

如果想修改颜色，那么请修改第二行，颜色可以增加可以减少。

也可以修改鼠标放开后恢复的颜色，也就是#333333

接着。。。。

没有了，喜欢的话亲手去试验一下吧~

地址：http://pan.baidu.com/s/12S9kE（提取密码：qf2d）