Слайдер
Слайдер
В действии
Не идеально и может не работать в IE и Opera
<script>
var Js = {
version:'1.0.0',
alert : function(text) {alert(text);},
int:function(value){return parseInt(value);},
get:function(id){return document.getElementById(id);},
onReady:function(func){
switch (typeof func)
{
case "function": window.onload = eval(func);
break;
default:alert('Неверный тип параметра для onReady\n'+func+"\n"+typeof func+"\n");
}
},
slider:function(parametrs) {
var param=parametrs,
id,
width,
height,
value;
if(typeof param == 'object'){
param.id?id=param.id:alert("Не задан id для slider");
param.width?width=param.width:width=120;
param.height?height=param.height:height=100;
param.value?value=param.value:value=0;
param.idValue?idValue=param.idValue:idValue=undefined;
var d = document;
var slider = d.createElement('DIV');
slider.id = id + '_slider';
slider.className = 'slider roundCornerAll';
var ref=Js.get(id);
ref.appendChild(slider);
slider.style.width = width+'px';
slider.style.height = height+'px';
var knob = d.createElement('DIV');
knob.id = id + '_knob';
knob.className = 'knob roundCornerAll';
slider.appendChild(knob); // добавляем его в документ
knob.style.left=value-(height+2)/2;
knob.style.width=height+2;
knob.style.height=height+2;
var sliderMove=false;
var sliderWidth=Js.int(slider.style.width);
var knobWidth=Js.int(knob.style.width);
if(idValue!=undefined){Js.get(idValue).innerHTML=Js.int(knob.style.left)+knobWidth/2;}
function setValue(value)
{
var sliderWidth=Js.int(slider.style.width);
var knobWidth=Js.int(knob.style.width);
if(value < -knobWidth/2) knob.style.left = -knobWidth/2;
else if(value > sliderWidth - knobWidth/2){ knob.style.left = sliderWidth - knob.Width/2;}
else { knob.style.left =value;}
if(idValue!=undefined){Js.get(idValue).innerHTML=Js.int(knob.style.left)+knobWidth/2;}
}
slider.onmousedown = function sliderClick(e) {
var value =e.clientX - ref.offsetLeft - Js.int(knob.style.width)/2;
setValue(value);
sliderMove=true;
}
slider.onmouseup= function(){sliderMove=false;}
knob.onmousedown = function(){sliderMove=true;}
knob.onmouseup = function(){sliderMove=false;}
slider.onmousemove = function(e) {
if(sliderMove){
var value =e.clientX - ref.offsetLeft - Js.int(knob.style.width)/2;
setValue(value);
}
}
document.onmouseup=function(){sliderMove=false;}
}
}
}
Js.onReady(function(){
Js.slider({id:'s1',idValue:'value',width:200,height:10,value:0});
});
</script>
<style>
.roundCornerAll{-moz-border-radius:4px;-webkit-border-radius: 4px;}
.knob{position: relative;background-image: url('knob.png');border:1px solid #CCCCCC;top:-0.15em;cursor:pointer;}
.slider{width:100; height:7;border:1px solid #DDDDDD;background:url('sliderBackground.png') repeat-x scroll 50% top #EEEEEE;}
</style>
<div id="s1"></div>
<div id="value"></div>
Очень полезный сайт
JQuery Slider
|
добавь к бб-тегу js параметр run
не понятно, зачем пытаться изобретать велосипед, который к тому же может не работать в IE и Opera
Ребята, не гоните! )))
var x0, divX0, moveState = false; var rulerLeft = 0; var rulerRight = _o('ruler').offsetWidth - 9; function _o(obj){return document.getElementById(obj)} function defPosition(event) { var x = 0; if (document.attachEvent != null) { x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft} if (!document.attachEvent && document.addEventListener) { x = event.clientX + window.scrollX} return {x:x}} function drag(div, event) { var event = event || window.event; x0 = defPosition(event).x; divX0 = parseInt(div.style.left); moveState = true; var shiftX = divX0 - x0; document.onmousemove = function(event) { if (moveState) { var newPosition = defPosition(event).x + shiftX; if (newPosition < rulerLeft) {newPosition = rulerLeft} if (newPosition > rulerRight){newPosition = rulerRight} div.style.left = newPosition+'px'; document.onmouseup = function(event) { if (moveState) {moveState = false}}}К чему столько кода, я например делал так:
function movestart (el) { document.onmousemove = function (ev) { e = ev || window.event; if (e.pageX == null && e.clientX != null ) { var html = document.documentElement var body = document.body e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0) e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0)} if (e.pageX < 510) {el.style.marginLeft = document.getElementById('counter').innerHTML = e.pageX - 10;}} document.onmouseup = function () {document.onmousemove = null};} document.getElementById('area').onclick = function (event) { document.getElementById('x').style.marginLeft = document.getElementById('counter').innerHTML = event.pageX - 10;}В разы короче + работает во всех браузерах.
а есть рабочий пример как это выглядит?