カラーバー作成サンプル。
![]() |
<script type="text/javascript">
var sliderR, sliderG, sliderB;
function init(){
sliderR=new Slider2('slider-r');
sliderG=new Slider2('slider-g');
sliderB=new Slider2('slider-b');
for(var i=0,s,ss=[sliderR,sliderG,sliderB];s=ss[i];i++)
s.lever('images/cursor-11.png',{width:'10px',height:'25px'})
.min({x:0})
.max({x:255})
.limit({right: 255, left: 0, top:0, bottom: 0})
.callback(cb)
;
return true;
}
function cb(e){
var r=sliderR.getValue().x;
var g=sliderG.getValue().x;
var b=sliderB.getValue().x;
var rgb='rgb( '+r+' , '+g+' , '+b+' ) #'+S(r)+S(g)+S(b);
document.getElementById('outputtext').value=rgb;
}
function S(s){
return ('0'+s.toString(16)).substr(-2).toUpperCase();
}
</script>
<style type="text/css">
.slider {
width: 265px; /* frame_width + lever_width */
height: 25px;
background: #ffffee url(images/color-r.png) 5px top no-repeat;
padding: 0;
margin: 0;
}
#slider-r { background-image: url(images/color-r.png); }
#slider-g { background-image: url(images/color-g.png); }
#slider-b { background-image: url(images/color-b.png); }
</style>
|
-->