Javascript.RU

Слайдер

Слайдер

В действии

Не идеально и может не работать в 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

0

Автор: KOLANICH, дата: 10 мая, 2010 - 14:40
#permalink

добавь к бб-тегу js параметр run


Автор: GasheK (не зарегистрирован), дата: 14 мая, 2010 - 14:22
#permalink

не понятно, зачем пытаться изобретать велосипед, который к тому же может не работать в IE и Opera


Автор: ursusdrew (не зарегистрирован), дата: 19 мая, 2010 - 15:45
#permalink

Ребята, не гоните! )))

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}}}

Автор: exec, дата: 25 мая, 2010 - 07:13
#permalink

К чему столько кода, я например делал так:

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;}

В разы короче + работает во всех браузерах.


Автор: pazik, дата: 27 декабря, 2012 - 19:44
#permalink

а есть рабочий пример как это выглядит?


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
12 + 5 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
mycoding
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние комментарии
Последние темы на форуме
Forum