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

利用jqueryColor实现背景颜色动态变化 热爱折腾 第1张

利用jqueryColor实现背景颜色动态变化 热爱折腾 第2张

利用jqueryColor实现背景颜色动态变化 热爱折腾 第3张

利用jqueryColor实现背景颜色动态变化 热爱折腾 第4张

第一张是正常显示效果,下面三张是鼠标放到导航上面时候的颜色,颜色随机,我设置了赤橙红绿青蓝紫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)