jQuery实用网页元素颜色修改插件

JQUERY教程手机阅读

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

查看演示源码下载201503241537.zip

安装
可以通过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插件有以下参数可以使用。