这是一款非常实用的可以在页面滚动或触发其它事件时修改网页元素的背景、前景和边框颜色的jQuery插件。该修改颜色jQuery插件支持各种鼠标事件和页面滚动事件，可以在这些事件触发的时候，平滑的将元素的颜色修改为指定的颜色。

安装

可以通过npm来安装该jQuery插件。

npm install yaco           
              

使用方法

要使用该修改元素颜色jQuery插件，首先要在页面中引入jQuery和jquery.yaco.js文件。

<script src="js/jquery.min.js"></script>
<script src="js/jquery.yaco.js"></script>              
              

然后设置你需要修改颜色的<div>。给该div设置data-yaco="true"，并在data-yaco-color属性中设置你想要变换的颜色。

<div id="firstDiv" data-yaco="true" data-yaco-color="#22A7F0"></div>
<div id="secondDiv" data-yaco="true" data-yaco-color="#6C7A89"></div>                
              

接下来就可以初始化插件了。

<script type="text/javascript">
/*  Default behaviour of YACo - Change current page's background-color when reach specific div on scroll !
*   Works with data attributes in html markup, easy as 1,2,3 !
*   Be sure you have defined a yaco div to reach. (ex: [data-yaco="true"] )
*   Be sure you have defined the changed color when the div is reach. (ex: [data-yaco-color="black"])
*/
    $('html').yaco();
/* If you want to use YACo with some specifics options, on a specific element:
*   DON'T FORGET to set 'default' parameter to 'false'
*/
    $('#anotherDiv').yaco({
        default: false,
        change: ['border','color'],
        colors: ['#3498db','#9b59b6','#34495e'],
        delay: 0.8,
        transition: 'ease'
    });
</script>                
              

配置参数

该元素颜色修改jQuery插件有以下参数可以使用。

• default：类型：boolean。是否允许插件的默认行为。
• change：类型：array。在background/color/border上应用修改。(ex:['background', 'border'])
• colors：类型：array。传入一组你想要修改的颜色。(ex: ['#1abc9c','#16a085','#3498db'])
• excludes：类型：array。你要排除的一组颜色。(ex: ['#1abcd4','#16a085'])
• delay：类型：float。延迟时间。
• transition：类型：string。CSS3过渡效果。
• random：类型：boolean。如果需要随机颜色，设置为true。

在线预览    源码下载