Radiation15
вот это попробуй=)
<html>
<head>
<style type="text/css">
.track {
width: 300px;
position: relative;
display: block;
height: 22px;
border: solid 1px #000;
overflow: hidden;
}
.track .thumb {
width: 20px;
height: 20px;
top: 1px;
position: absolute;
background-color: gray;
border-radius: 3px;
left: 0;
}
#view {
position: relative;
width: 600px;
height: 220px;
margin-bottom: 10px;
overflow: hidden;
border: solid 1px black;
}
#items {
margin: 0;
padding: 10px 0 0;
position: absolute;
display: block;
height: 200px;
list-style: none none;
}
#items li {
float: left;
display: block;
margin-right: 10px;
margin-left: 10px;
padding-top: 90px;
width: 200px;
height: 108px;
text-align: center;
border: solid 1px gray;
background-color: #99ccff;
}
c1 {
float: left;
margin-right: 10px;
margin-left: 10px;
padding-top: 90px;
width: 200px;
height: 108px;
text-align: center;
border: solid 1px gray;
background-color: #d50a0a
}
c2 {
float: left;
margin-right: 10px;
margin-left: 10px;
padding-top: 90px;
width: 200px;
height: 108px;
text-align: center;
border: solid 1px gray;
background-color: #08c29d
}
</style>
<script type="text/javascript">
//<![CDATA[
$(window).load(function(){
(function($) {
var defaults = {
maxBorderOut: 10,
lapse: 2,
impulse: 8,
speed: 800,
size: 300,
max: 250,
value: 0,
slide: null,
start: null,
stop: null
};
function CheckValue(checkValue, minVal, maxVal) {
var res = checkValue;
if (checkValue < minVal) {
res = minVal;
}
else if (checkValue > maxVal) {
res = maxVal;
}
return res;
}
var methods = {
init:function(params) {
var options = $.extend({}, defaults, params);
var init = $(this).data('kineticBar');
$(this).data('options', options);
$(this).data('step', 1);
if (init) {
return this;
} else {
$(this).data('kineticBar', true);
var $track = this;
this.width(options.size);
this.addClass('track');
this.html('<div class="thumb"></div>')
var $thumb = this.children('div.thumb');
$thumb.bind('dragstart', false);
if (options.max < options.size) {
$thumb.width(options.size - options.max);
}
else {
$thumb.width(20);
$(this).data('step', options.max / (options.size - 20));
}
var isClicked = false;
var clickPointX = 0;
var dx = 0;
$track.kineticBar('value', options.value);
$thumb.bind("mousedown.kineticBar", function(e) {
clickPointX = e.pageX - $(this).offset().left;
isClicked = true;
if (options.start) {
options.start($track.kineticBar('value'));
}
$thumb.stop();
});
$(document).bind("mouseup.kineticBar", function(e) {
if (isClicked) {
if (Math.abs(dx) < options.lapse) {
dx = 0;
}
var selfLeft = parseInt($thumb.css('left'));
var x = (selfLeft + options.impulse * dx);
x = CheckValue(x, 0, $track.width() - $thumb.width())
$thumb.stop().animate({
'left': x + 'px'
},
{
easing: 'easeOutCirc',
step: function(now, obj) {
if (options.slide) {
options.slide($track.kineticBar('value'));
}
},
complete: function() {
if (options.stop) {
options.stop($track.kineticBar('value'));
}
},
duration : options.speed
});
}
isClicked = false;
});
$(document).bind("mousemove.kineticBar", function(e) {
if (isClicked) {
var x = (e.pageX - $track.offset().left - clickPointX);
x = CheckValue(x, -options.maxBorderOut, $track.width() - $thumb.width() + options.maxBorderOut)
var selfLeft = parseInt($thumb.css('left'));
$thumb.css({
'left': x + 'px'
});
if (options.slide) {
options.slide($track.kineticBar('value'));
}
dx = x - selfLeft;
}
});
}
},
value: function(position) {
var isSetter = true;
if (!position) {
position = Math.round($(this).data('step') * parseInt(this.children('div').css('left')));
isSetter = false;
}
position = CheckValue(position, 0, $(this).data('options').max);
if (isSetter) {
position = Math.round(position / $(this).data('step'));
this.children('div').css('left', position + 'px');
if ($(this).data('options').slide) {
$(this).data('options').slide(position);
}
}
return position;
},
destroy:function() {
methods.reset.apply(this);
$(this).unbind(".kineticBar");
$(this).removeData('kineticBar');
$(this).removeData('options');
}
};
$.fn.kineticBar = function(method){
if ( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method "' + method + '" not found' );
}
};
})(jQuery);
$(function() {
$('#items').width(($('#items').children().length * 222));
$('#track').kineticBar(
{
size: 600, // Размер scrollbar'a в пикселях
max: $('#items').width() - 600, // Максимальное значение
// Функция, вызывающаяся при скролле
slide: function(val) {
$('#items').css({'left': -val + 'px'});
}
}
);
});
});//]]>
</script>
</head>
<body>
<div id="view">
<ul id="items" style="width: 2220px; left: 0px;"<!--забыл дописать=)--!>>
<li style="background-color:#bcbc06;">Item 1</li>
<li style="background-color:#06bc13;">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
</div>
<div id="track" style="width: 600px;" class="track"><div class="thumb" style="width: 20px; left: 0px;"></div></div>
</body>
</html>
Ты хоть сообщи то или нет?
