jQuery实用网页元素颜色修改插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款非常实用的可以在页面滚动或触发其它事件时修改网页元素的背景、前景和边框颜色的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>