JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > 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插件有以下参数可以使用。
  • 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。

【jQuery实用网页元素颜色修改插件】相关文章

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

2. jQuery实现页面元素在浏览器中任何时候保持全屏展示效果

3. jQuery的颜色选择器插件jPicker

4. 如何使用jquery插件截取图片颜色调

5. 使用 JavaScript 修改浏览器 URL 地址栏

6. HTML5与jQuery实现渐变绚丽网页图片效果

7. 7款很酷的JQuery动画和实用的JQuery应用

8. Adobe应用网络体验管理解决方案

9. 分享几个基于HTML5的字体应用网站

10. 如何使用details元素和summary元素

本文来源:https://www.51html5.com/a1517.html

点击展开全部

﹝jQuery实用网页元素颜色修改插件﹞相关内容

「jQuery实用网页元素颜色修改插件」相关专题

其它栏目

也许您还喜欢