var myProducts = new ScrollBar('products', 'bar', 'knob', { scroll: { duration: 2000, transition: 'elastic:out', onStart: function(){ // console.log('start ' + this.to[0]); }, onComplete: function(){ // console.log('complete ' + this.to[0]); } }, slider: { offset: -1, onChange: function(pos){ // console.log('change ' + pos); }, onComplete: function(pos){ // console.log('complete ' + pos); } }, knob: { duration: 1200, transition: 'elastic:out', onStart: function(){ // console.log('start ' + this.to[0].value); // knob position } } }); // move to position myProducts.set(50); var products = $$('#products li'); document.id('move1st').addEvent('click', function(){ myProducts.set(products[0]); }); document.id('move2nd').addEvent('click', function(){ myProducts.set(products[1]); }); document.id('move3rd').addEvent('click', function(){ myProducts.set(products[2]); }) document.id('move0').addEvent('click', function(){ myProducts.set(0); }); document.id('move10').addEvent('click', function(){ myProducts.set(10); }); document.id('move100').addEvent('click', function(){ myProducts.set(100); }); document.id('move300').addEvent('click', function(){ myProducts.set(300); });
move to element <a id="move1st" href="#">1st</a> <a id="move2nd" href="#">2nd</a> <a id="move3rd" href="#">3rd</a> or move knob to <a id="move0" href="#">0px</a> <a id="move10" href="#">10px</a> <a id="move100" href="#">100px</a> <a id="move300" href="#">300px</a> <br /> <div id="products"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li></ul></div> <div id="bar"><div id="knob"></div></div>
#products { width: 480px; height: 160px; overflow: hidden; position: relative; } #products ul { width: 3000px; } #products li { color: #888; float: left; width: 200px; position: relative; font-size: 156px; text-align: center; padding-top: 10px; line-height: 156px; list-style-type: none; } #bar { width: 480px; height: 21px; position: relative; background-color: #aaa; -moz-border-radius: 10px; -webkit-border-radius: 10px; } #knob { top: 1px; left: 1px; width: 100px; height: 19px; position: relative; background-color: white; -moz-border-radius: 8px; -webkit-border-radius: 8px; }