图片主色获取脚本rgbaster.js - 文章 - 伯乐在线
& 图片主色获取脚本rgbaster.js
一、我想写一篇长篇小说
我想写一篇长篇小说，每天上下班地铁的几个小时写写。不过还没完全构思好。据说，人在实现伟大的计划之前最好不要跟别人讲，等大米差不多煮熟的时候，再普照四方。但是呢，一直憋在心里也慌得很，实在忍不住了，这里一吐为快，反正是个小嘎吱角的地方，吐个火星（星星之火）没人发现的，(*^__^*) 嘻嘻…… 我琢磨着，每周写一段，像周刊一样，写个10年，恩，差不多了。说不定会火，哈哈！！
二、rgbaster.js小介绍
rgbaster.js是段小脚本，可以获得（具有访问权限的）图片的主色，次色等，然后，发挥我们的创意，实现一些精彩的Web交互效果。 rgbaster.js的Github项目地址是：
如何使用？
如何让妹子为你下厨？首先，你得有一个厨房。同样的，要使用rgbaster.js，首先，你得先调用之：
&script src=&/briangonzalez/rgbaster.js/master/rgbaster.js&&&/script&
<script src="http:///briangonzalez/rgbaster.js/master/rgbaster.js&&&/script&
然后，你得有个菜谱，知道该如何对妹子下手：
JavaScript
var img = document.getElementById('image');
var img = '/path-to-image.jpg'
RGBaster.colors(img, {
success: function(payload) {
// payload.dominant是主色，RGB形式表示
// payload.secondary是次色，RGB形式表示
// payload.palette是调色板，含多个主要颜色，数组
console.log(payload.dominant);
console.log(payload.secondary);
console.log(payload.palette);
1234567891011121314
var img = document.getElementById('image');// 或者var img = '/path-to-image.jpg'&RGBaster.colors(img, {&&success: function(payload) {&&&&// payload.dominant是主色，RGB形式表示&&&&// payload.secondary是次色，RGB形式表示&&&&// payload.palette是调色板，含多个主要颜色，数组&&&&console.log(payload.dominant);&&&&console.log(payload.secondary);&&&&console.log(payload.palette);&&}});
看来，这个妹子很好下手啊！ 就一个方法，RGBaster.colors就可以了，第1个参数img可以是图片DOM也可以是图片的URL地址。后面就是可选参数，说到可选参数，不只success这一个，还有下面这几位兄弟：
JavaScript
RGBaster.colors(img, {
paletteSize: 30, // 调色板大小
exclude: [ 'rgb(255,255,255)' ],
// 不包括白色
success: function(payload){
// 包含一些颜色信息(payload)的回调
RGBaster.colors(img, {&&paletteSize: 30, // 调色板大小&&exclude: [ 'rgb(255,255,255)' ],&&// 不包括白色&&success: function(payload){&&&&// 包含一些颜色信息(payload)的回调&&}})
paletteSize为30, 则payload.palette就是个包含前30主要颜色值的数组。 exclude表示数组中的颜色不参与，剔除。例如，一个小龙女舞剑的图片，我们可能需要的是其舞剑的背景。但是，由于小龙女长年古墓，缺少阳光，面色白皙，加上总是一袭白衣，这大大的白色虽是主色，但却我们想要的，于是需要剔除。
success就是我们下厨的主要内容了，回调中的payload参数，包含，主色、次色以及调色板信息，绝对可以满足我们绝大多数的需求。
三、rgbaster.js小使用
下面看看妹子是如何下厨的。 您可以狠狠地点击这里： 点击下面的四个圆点按钮走起：
可以看到，图片slide的同时，容器的背景色也随着一起改变，而容器的背景色就是美女图片的主色。 截个图让大家感受下：
相关JS代码为：
$(&#index a&).powerSwitch({
animation: &translate&,
classAdd: &active&,
onSwitch: function(target) {
RGBaster.colors(target.find(&img&).get(0), {
exclude: [ 'rgb(255,255,255)', 'rgb(0,0,0)' ],
success: function(payload) {
// 容器的背景色变成图片的主色 - payload.dominant
$(&#box&).css(&background-color&, payload.dominant);
}).eq(0).trigger(&click&);
12345678910111213
$("#index a&).powerSwitch({&&&&animation: "translate",&&&&classAdd: "active",&&&&onSwitch: function(target) {&&&&&&&&RGBaster.colors(target.find("img").get(0), {&&&&&&&&&&exclude: [ 'rgb(255,255,255)', 'rgb(0,0,0)' ],&&&&&&&&&&success: function(payload) {&&&&&&&&&&&&// 容器的背景色变成图片的主色 - payload.dominant&&&&&&&&&&&&$("#box&).css(&background-color&, payload.dominant);&&&&&&&&&&}&&&&&&&&});&&&&&&&&}&&&&}).eq(0).trigger("click");
powerSwitch为中的方法，onSwitch是slide切换的回调，回调执行的就是rgbaster.js的RGBaster.colors方法，不考虑黑白两色，让box的背景色变成图片的主色，哈，很简单吧~
四、rgbaster.js的使用限制
1. 浏览器支持 由于使用Canvas的getImageData获得图片颜色信息（我之前的）, 因此，需要IE9+浏览器支持；同时，使用了XMLHttpRequest2.0, 貌似要IE10+可以畅快使用（据说IE8/IE9可以使用XDomainRequest对象实现类似功能，未研究，具体不详）；
2. 跨域限制 XMLHttpRequest2.0获得图片数据，本地数据自然无障碍，对于跨域的数据，需要设置。宗旨就是，控制Access-Control-Allow-Origin，例如，你希望你站点的图片只有我站点可以访问，则想办法通过设置，使得请求信息中包含：
Access-Control-Allow-Origin:
Access-Control-Allow-Origin: http://
如果是所有站点，则：
Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: *
不同的服务器设置是不一样的，大家自行百之谷之。
五、我想写一篇长篇小说
//zxx: 接开头。 面向的群体是，应该是同龄人。走搞笑风格还是严肃风格，应该带有搞笑，主旨但高大上。最好带点热血。恩~~ 还有就是………………哎呀呀，好像很难的样子……按照这个节奏，估计还要再构思个半年~~ 在此之前，还是多盘出点技术文章吧。
可能感兴趣的话题
在使用中，部署到服务器 却遇到无法访问请求到 success 里面，请问这个事跨域的问题吗。要如何解决。
关于伯乐在线博客
在这个信息爆炸的时代，人们已然被大量、快速并且简短的信息所包围。然而，我们相信：过多“快餐”式的阅读只会令人“虚胖”，缺乏实质的内涵。伯乐在线内容团队正试图以我们微薄的力量，把优秀的原创文章和译文分享给读者，为“快餐”添加一些“营养”元素。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2016 伯乐在线JS图片自动和可控的轮播切换特效_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
JS图片自动和可控的轮播切换特效
上传于||暂无简介
阅读已结束，如果下载本文需要使用0下载券
想免费下载更多文档？
你可能喜欢+ 相关素材简单的JS轮播图代码
作者：刘彦佐
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了简单的JS轮播图实现方法，代码简单易懂，非常不错，具有参考借鉴价值,需要的朋友可以参考下
在团队带人，突然被人问到轮播图如何实现，进入前端领域有一年多了，但很久没自己写过，一直是用大牛写的插件，今天就写个简单的适合入门者学习的小教程。当然，轮播图的实现原理与设计模式有很多种，我这里讲的是用面向过程函数式编程去实现，相对于面向对象设计模式，代码难免会显得臃肿冗余。但没有面向对象的抽象却很适合新手理解与学习。已经在BAT的同学看到希望少喷点。另外可以多提意见。
轮播图的原理：
一系列的大小相等的图片平铺，利用CSS布局只显示一张图片，其余隐藏。通过计算偏移量利用定时器实现自动播放，或通过手动点击事件切换图片。
首先父容器container存放所有内容，子容器list存在图片。子容器buttons存放按钮小圆点。
&div id="container"&
&div id="list" style="left: -600"&
&img src="img/5.jpg" alt="1" /&
&img src="img/1.jpg" alt="1" /&
&img src="img/2.jpg" alt="2" /&
&img src="img/3.jpg" alt="3" /&
&img src="img/4.jpg" alt="4" /&
&img src="img/5.jpg" alt="5" /&
&img src="img/1.jpg" alt="5" /&
&div id="buttons"&
&span index="1" class="on"&&/span&
&span index="2"&&/span&
&span index="3"&&/span&
&span index="4"&&/span&
&span index="5"&&/span&
&a href="javascript:;" id="prev" class="arrow"&&&/a&
&a href="javascript:;" id="next" class="arrow"&&&/a&
优化，无缝滚动。
当你从最后一张图切换回第一张图时，有很大空白，利用两张辅助图来填补这个空白。
这里补充下无缝滚动，直接看代码，复制最后一张图片放置第一张图片前，同时复制第一张图片放置最后一张图片的后面。并且，将第一张图片辅助图（实际上是实际显示的第5张图片隐藏起来，故设置style="left: -600"）
1、对盒子模型，文档流的理解，绝对定位问题。
2、注意list的overflow:只显示窗口的一张图片，把左右两边的都隐藏起来。
3、确保buttons中每个span所在层置顶，将其设置为最顶端。（z-index:999）
margin: 0;
padding: 0;
text-decoration:
padding: 20
#container {
width: 600
height: 400
border: 3px solid #333;
width: 4200
height: 400
z-index: 1;
#list img {
width: 600
height: 400
#buttons {
height: 10
width: 100
z-index: 2;
bottom: 20
#buttons span {
border: 1px solid #
height: 10
border-radius: 50%;
background: #333;
margin-right: 5
#buttons .on {
background:
line-height: 39
text-align:
font-size: 36
font-weight:
height: 40
z-index: 2;
background-color: RGBA(0, 0, 0, .3);
.arrow:hover {
background-color: RGBA(0, 0, 0, .7);
#container:hover .arrow {
首先我们先实现出手动点击左右两个箭头切换图片的效果：
window.onload = function() {
var list = document.getElementById('list');var prev = document.getElementById('prev');
var next = document.getElementById('next');
function animate(offset) {
//获取的是style.left，是相对左边获取距离，所以第一张图后style.left都为负值，
//且style.left获取的是字符串，需要用parseInt()取整转化为数字。
var newLeft = parseInt(list.style.left) +
list.style.left = newLeft + 'px';
prev.onclick = function() {
animate(600);
next.onclick = function() {
animate(-600);
运行后我们会发现，一直点击右箭头 ，会出现空白，而且，不能回到第一张图片。要点击左箭头才能回到第一张图片。
利用谷歌浏览器F12，原因是我们利用偏移量left来获取图片，当看到left值小于3600时，因为没有第8张图片就出现空白，所以这里我们需要对偏移量做一个判断。
在animate函数里加上这么一段：
if(newLeft&-3000){
list.style.left = -600 + 'px';
if(newLeft&-600){
list.style.left = -3000 + 'px';
好，运行一下，没问题了。轮播图，顾名思义，是自己会动的图片，这个时候我们需要用到浏览器的内置对象定时器。
对于定时器，有必要说明一下setInterval()跟setTimeout的区别了。简单来说，setInterval()执行多次，setTimeout()只执行一次。
更具体的用法可以点击链接查看区别：window.setInterval window.setTimeout 。
这里我们是用setInterval()，因为我们的图片需要循环滚动。插入下面
function play() {
timer = setInterval(function () {
prev.onclick()
运行，ok！
但是，当我们想仔细看某一张图片时候，要把图片停住，我们清楚定时器就可以了，这里用到window.clearInterval 这个方法。
这里，我们需要对其DOM操作，需要获取整个轮播图区域；
var container = document.getElementById('container');
function stop() {
clearInterval(timer);
container.onmouseover =
container.onmouseout =
但这里，一个轮播图基本算完成了，有同学·会问，那么简单。看到图片下面的那一排小圆点没。我给你加功能了。
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
这里是升级版：
var buttons = document.getElementById('buttons').getElementsByTagName('span');
var index = 1;
function buttonsShow() {
//这里需要清除之前的样式
for (var i = 0; i & buttons. i++) {
if (buttons[i].className == 'on') {
buttons[i].className = '';
//数组从0开始，故index需要-1
buttons[index - 1].className = 'on';
prev.onclick = function() {
index -= 1;
if (index & 1) {
index = 5;
buttonsShow();
animate(600);
next.onclick = function() {
//由于上边定时器的作用，index会一直递增下去，我们只有5个小圆点，所以需要做出判断
index += 1;
if (index & 5) {
index = 1;
buttonsShow();
animate(-600);
现在看起来正常多了吧，但我们想实现通过鼠标任意点击其中一个小圆点，切换到相应的图片，原理同样，我们还是需要通过偏移量去找到对应的图片。
for (var i = 0; i & buttons. i++) {
buttons[i].onclick = function() {
//优化，当前图片点击当前的小圆点不执行以下代码。
if (this.className == "on") {
/* 偏移量获取：这里获得鼠标移动到小圆点的位置，用this把index绑定到对象buttons[i]上，去谷歌this的用法 */
/* 由于这里的index是自定义属性，需要用到getAttribute()这个DOM2级方法，去获取自定义index的属性*/
var clickIndex = parseInt(this.getAttribute('index'));
var offset = 600 * (clickIndex - index);
animate(offset);
//存放鼠标点击后的位置，用于小圆点的正常显示
index = clickI
buttonsShow();
大家，可能发现了，这个轮播图有点奇怪，不中规中矩，它是向左切换的，改写一下：
function play() {
//将轮播图换成向右切换图片
timer = setInterval(function () {
next.onclick();
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&&/title&
&style type="text/css"&
margin: 0;
padding: 0;
text-decoration:
padding: 20
#container {
width: 600
height: 400
border: 3px solid #333;
width: 4200
height: 400
z-index: 1;
#list img {
width: 600
height: 400
#buttons {
height: 10
width: 100
z-index: 2;
bottom: 20
#buttons span {
border: 1px solid #
height: 10
border-radius: 50%;
background: #333;
margin-right: 5
#buttons .on {
background:
line-height: 39
text-align:
font-size: 36
font-weight:
height: 40
z-index: 2;
background-color: RGBA(0, 0, 0, .3);
.arrow:hover {
background-color: RGBA(0, 0, 0, .7);
#container:hover .arrow {
&script type="text/javascript"&
/* 知识点： */
/* this用法 */
/* DOM事件 */
/* 定时器 */
window.onload = function () {
var container = document.getElementById('container');
var list = document.getElementById('list');
var buttons = document.getElementById('buttons').getElementsByTagName('span');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var index = 1;
function animate(offset) {
//获取的是style.left，是相对左边获取距离，所以第一张图后style.left都为负值，
//且style.left获取的是字符串，需要用parseInt()取整转化为数字。
var newLeft = parseInt(list.style.left) +
list.style.left = newLeft + 'px';
//无限滚动判断
if (newLeft & -600) {
list.style.left = -3000 + 'px';
if (newLeft & -3000) {
list.style.left = -600 + 'px';
function play() {
//重复执行的定时器
timer = setInterval(function () {
next.onclick();
function stop() {
clearInterval(timer);
function buttonsShow() {
//将之前的小圆点的样式清除
for (var i = 0; i & buttons. i++) {
if (buttons[i].className == "on") {
buttons[i].className = "";
//数组从0开始，故index需要-1
buttons[index - 1].className = "on";
prev.onclick = function () {
index -= 1;
if (index & 1) {
buttonsShow();
animate(600);
next.onclick = function () {
//由于上边定时器的作用，index会一直递增下去，我们只有5个小圆点，所以需要做出判断
index += 1;
if (index & 5) {
animate(-600);
buttonsShow();
for (var i = 0; i & buttons. i++) {
buttons[i].onclick = function () {
//优化，当前图片点击当前的小圆点不执行以下代码。
if (this.className == "on") {
/* 这里获得鼠标移动到小圆点的位置，用this把index绑定到对象buttons[i]上，去谷歌this的用法 */
/* 由于这里的index是自定义属性，需要用到getAttribute()这个DOM2级方法，去获取自定义index的属性*/
var clickIndex = parseInt(this.getAttribute('index'));
var offset = 600 * (clickIndex - index); //这个index是当前图片停留时的index
animate(offset);
index = clickI //存放鼠标点击后的位置，用于小圆点的正常显示
buttonsShow();
container.onmouseover =
container.onmouseout =
&div id="container"&
&div id="list" style="left: -600"&
&img src="img/5.jpg" alt="1"/&
&img src="img/1.jpg" alt="1"/&
&img src="img/2.jpg" alt="2"/&
&img src="img/3.jpg" alt="3"/&
&img src="img/4.jpg" alt="4"/&
&img src="img/5.jpg" alt="5"/&
&img src="img/1.jpg" alt="5"/&
&div id="buttons"&
&span index="1" class="on"&&/span&
&span index="2"&&/span&
&span index="3"&&/span&
&span index="4"&&/span&
&span index="5"&&/span&
&a href="javascript:;" id="prev" class="arrow"&&&/a&
&a href="javascript:;" id="next" class="arrow"&&&/a&
以上所述是小编给大家介绍的简单的JS轮播图代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具jQuery 支持标题的banner 圆点切换 左右箭头切换 自动切换-freejs.net代码演示
&&&&jQuery 支持标题的banner 圆点切换 左右箭头切换 自动切换()
jQuery 支持标题的banner 圆点切换 左右箭头切换 自动切换
包含2个扩展演示，和
&id=&content&&&
&class=&border_box&&&
&class=&box_skitter&box_skitter_large&&&
&href=&#cube&&src=&images/example/001.jpg&&class=&cube&&&&
&class=&label_text&&&
&href=&#cubeRandom&&src=&images/example/002.jpg&&class=&cubeRandom&&&&
&class=&label_text&&&
cubeRandom&&
&href=&#block&&src=&images/example/003.jpg&&class=&block&&&&
&class=&label_text&&&
&href=&#cubeStop&&src=&images/example/004.jpg&&class=&cubeStop&&&&
&class=&label_text&&&
cubeStop&&
&script&type=&text/javascript&&language=&javascript&& &&
&&&&&&&&$(document).ready(function()&{ &&
&&&&&&&&&&&&$('.box_skitter_large').skitter({ &&
&&&&&&&&&&&&&&&&theme:&'clean', &&
&&&&&&&&&&&&&&&&numbers_align:&'center', &&
&&&&&&&&&&&&&&&&progressbar:&true,& &&
&&&&&&&&&&&&&&&&dots:&true,& &&
&&&&&&&&&&&&&&&&preview:&true&&
&&&&&&&&&&&&}); &&
&&&&&&&&}); &&
&&&&&/script&&&
&原文地址:}