Когда я посмотрел на этот вопрос, мне нужно было что-то простое. Уже есть несколько ответов фреймворка о том, как это сделать, но иногда проще и гибче просто создать свой собственный. Конечно, вместе с фреймворком вы получаете определенную сумму бесплатно (и часто это правильный выбор, если он подходит), но тогда вам придется беспокоиться о совместимости фреймворка, поддержке и копаться в его недрах, чтобы идти дальше. вне его границ.
Вот простой слайдер только для javascript. В основном это img для ползунка, img для кнопки и обратный вызов с процентом выполнения. Не поющий и танцующий слайдер, а что-то простое в использовании.
Демо
HTML
<div id='bb_sliderContainer' ondragstart="return false;" ondrop="return false;">
<img id='bb_slider' src='slider.png'/>
<img id='bb_sliderButton' src='sliderbutton.png'/>
</div>
Сценарий
Поместите в файл javascript:
(function(bb,undefined){
bb.Slider = function(buttonCssId,sliderCssId,initialPercentage,progressUpdate)
{
var halfButtonWidth = 5;
var sliderMoving = false;
var buttonElement = document.getElementById(buttonCssId);
var sliderElement = document.getElementById(sliderCssId);
var length = sliderElement.clientWidth;
var leftPos = 0;
var rightPos = leftPos + length;
length = rightPos - leftPos;
if( initialPercentage )
{
var buttonPos = leftPos + initialPercentage / 100 * length;
buttonElement.style.left = buttonPos - halfButtonWidth + 'px';
}
buttonElement.addEventListener( 'mousedown', function(){
sliderMoving = true;
} );
document.addEventListener( 'mousemove', function(event){
if( sliderMoving == true )
{
var rect = sliderElement.getBoundingClientRect();
var mouseX = event.clientX - rect.left;
var prop = mouseX / length;
if( prop < 0 )
{
prop = 0;
mouseX = 0;
}
if( prop > 1 )
{
prop = 1;
mouseX = length;
}
buttonElement.style.left = leftPos + prop * length - halfButtonWidth + 'px';
progressUpdate(prop * 100);
}
});
document.addEventListener( 'mouseup', function(){
sliderMoving = false;
});
}
}(window.bb = window.bb || {}));
Пример использования
HTML:
<img src='space.png' style='width:50%;position:relative;top:20px' id='bb_sliderSubject'>
Javascript:
function sliderUpdate(percentage)
{
var sliderSubject = document.getElementById('bb_sliderSubject');
sliderSubject.style.width = percentage + '%';
}
window.onload=function()
{
var slider = new bb.Slider('bb_sliderButton','bb_slider',50,sliderUpdate);
}
person
acarlon
schedule
08.05.2014