Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.07.2010, 01:43
Интересующийся
Отправить личное сообщение для exvion Посмотреть профиль Найти все сообщения от exvion
 
Регистрация: 25.01.2010
Сообщений: 27

Отслеживание перемещения мыши в слайдере
Пробую сделать вот такой слайдер


Принцип работы:
Нажимаем правой кнопкой мыши на слайдер и, не отпуская кнопку, перемещаем мышь вправо/влево при этом числовое значение увеличивается/уменьшается. Когда индикатор заполнен полностью, это значит, что установлено максимальное значение.

Как с помощью jquery отслеживать относительное перемещение мыши c учетом направления?
Или может кто встречал похожую реализацию плагина?
Ответить с цитированием
  #2 (permalink)  
Старый 19.07.2010, 09:22
Аватар для Vulkan
Профессор
Отправить личное сообщение для Vulkan Посмотреть профиль Найти все сообщения от Vulkan
 
Регистрация: 25.05.2010
Сообщений: 511

На jQuery не встречал, вот есть на этом сайте другой урок, он тебе точно поможет. Потом можешь просто создать мини обработчик, который будет при движении мыши вычитать предыдущую координату например из нынешней и заполнять область слайдера.

Последний раз редактировалось Vulkan, 19.07.2010 в 09:25.
Ответить с цитированием
  #3 (permalink)  
Старый 20.07.2010, 21:41
Интересующийся
Отправить личное сообщение для exvion Посмотреть профиль Найти все сообщения от exvion
 
Регистрация: 25.01.2010
Сообщений: 27

Попробовал сверстать слайдер с помощью css. Результат на данный момент: http://exvion.ru/temp/slider.html

И сразу столкнулся с несколькими проблемами:
1. Как расположить надпись по центру слайдера при этом разместить под ней серый и белый индикаторы?
2. Как сделать отступы между слайдерами, padding вызывает перемещение слайдера вниз?

Код:
<style type="text/css">
html, body, div, span{
background:none repeat scroll 0 0 transparent;
border:0 none;
font-size:100%;
margin:0;
outline:0 none;
padding:0;
vertical-align:baseline;
}

.columns {
height:30px;
}

.columns>div {
float:left;
}

body {
overflow: hidden;
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #727272;
font-size:11px;
}

#slider {
width:100%;
height:21px;
display:block;
}

.fill{
background: url("img/slider_fill.png") repeat-x scroll 0 0 transparent;
width:100%;
display:block;
float:left;
}

.gray {
background: url("img/gradient_gray_off.png") repeat-x scroll 0pt 0pt transparent;
position:relative;
width:60%;
margin-right:-50%;
height:21px;
float:left;
left:0;
margin-left:9px;
}

.white {
background: url("img/gradient_white_off.png") repeat-x scroll 0pt 0pt transparent;
height:18px;
position:relative;
width:50%;
margin-right:-50%;
float:left;
left:50%;
z-index:-1;
}

.phh{
margin:-5px 0;
padding:10px 0;
//background:#a67c56;
//background:rgba(166, 124, 86, 0.7);
position:relative;			
left:0%;
margin-right:-100%;
text-align:center;
width:200%;
}
</style>
</head>
<body>

<div class="columns" style="">
			<div style="width: 50%; padding: 0px 0px; margin: 0px;">
			<div style="margin-right: 0px; padding: 1px 0px 0px; border: medium none; float: left; display: block; text-align: center; height: 21px; width: 100%; background: url(&quot;img/slider_fill.png&quot;) repeat-x scroll 0pt 0pt transparent;" class="fill" title="">
				<div class="gray">
				<div class="phh">Blend: 2.917</div>
				</div>
				<div class="white">
				</div>
			</div>		
			<img style="cursor: pointer; padding: 0px; margin: 0pt 0pt 0pt -100%; width: 10px; vertical-align: middle; float: left;" src="img/slider_left.png"/>
			<img style="cursor: pointer; padding: 0px; margin: 0pt 0pt 0pt -9px; width: 9px; vertical-align: middle; float: left;" src="img/slider_right.png"/>
			</div>
			
			<div style="width: 50%; padding: 0px 0px; margin: 0px;">
			
			</div>
		</div>

Последний раз редактировалось exvion, 20.07.2010 в 22:22.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
мыши, кнопки, event.button и other browsers, but not in IE idudiq Events/DOM/Window 1 03.10.2009 11:09
Отслеживание щелчка мыши MaxPayne Events/DOM/Window 2 01.05.2009 13:20
Имитация нажатия кнопки мыши Mantell Общие вопросы Javascript 3 19.02.2009 17:03
Как имитировать событие мыши Andrey_V Общие вопросы Javascript 4 10.11.2008 16:39
FireFox: onmouseover не работает при зажатой кнопке мыши no. Общие вопросы Javascript 4 19.08.2008 13:43