A-A+

JavaScript库 Grade

2016年08月31日 Linux 软件 暂无评论 阅读 947 次

Grade 是一个 JavaScript 库,作用是从图像中提取前2个主要颜色产生互补的渐变。

Demo 演示地址:http://benhowdle.im/grade/

安装

下载这个库,并从 /docs/dist 文件夹中取出 grade.js

或是使用 npm 方式安装:npm install grade-js

使用

推荐使用HTML结构:

<!--the gradients will be applied to these outer divs, as background-images-->
<div class="gradient-wrap">
    <img src="./samples/finding-dory.jpg" alt="" />
</div>
<div class="gradient-wrap">
    <img src="./samples/good-dinosaur.jpg" alt="" />
</div>

如果你的项目中有 grade.js,你可以用一个 script 标签包裹它,并且像这样去初始化:

<script src="path/to/grade.js"></script>
<script type="text/javascript">    
    window.addEventListener('load', function(){        
        /*            
            A NodeList of all your image containers (Or a single Node).            
            The library will locate an <img /> within each            
            container to create the gradient from.         
        */        
        Grade(document.querySelectorAll('.gradient-wrap'))    
    })
</script>

如果你使用 npm 方式安装,也可以像这样使用库:

import Grade from 'grade-js'
// initialise as above
标签:

给我留言

Copyright © SEARU.ORG 保留所有权利.   Theme  Ality 网站地图 360网站安全检测平台

用户登录

分享到: