rgbaster.js使用实例页面

CSS代码：

.box { width: 600px; height: 600px; box-shadow: inset 0 60px rgba(255,255,255,.2), inset 0 0 300px rgba(255,255,255,.1), inset 50px -20px 0 rgba(255,255,255,.1), inset -300px 120px rgba(255,255,255,.06); -webkit-transition: background-color .25s; transition: background-color .25s; overflow: hidden; position: relative; }
.list { width: 600px; height: 600px; position: absolute; text-align: center; display: none; }
.list > img { vertical-align: middle; box-shadow: 0 0 10px rgba(0,0,0,.35) }
.list::after { content: ''; display: inline-block; width: 0; height: 100%; vertical-align: middle; }
.index { width: 600px; margin-top: 20px; text-align: center; }
.dot { display: inline-block; margin: 0 2px; width: 16px; height: 16px; line-height: 16px; border-radius: 14px; background-color: #ddd; text-align: center; color: #333; font-family: 'microsoft yahei'; font-size: 12px; }
.dot:hover { text-decoration: none; }
.active { background-color: #cd0000; color: #fff; }
                

HTML代码：

<div id="box" class="box">
    <div id="list1" class="list"><img src="mm1.jpg"></div>
    <div id="list2" class="list"><img src="mm2.jpg"></div>
    <div id="list3" class="list"><img src="mm3.jpg"></div>
    <div id="list4" class="list"><img src="mm4.jpg"></div>
</div>
<div id="index" class="index">
    <a href="javascript:" class="dot" data-rel="list1">1</a>
    <a href="javascript:" class="dot" data-rel="list2">2</a>
    <a href="javascript:" class="dot" data-rel="list3">3</a>
    <a href="javascript:" class="dot" data-rel="list4">4</a>
</div>
                

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) {
            $("#box").css("background-color", payload.dominant);
          }
        });    
    }    
}).eq(0).trigger("click");