X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Слайдер на JavaScript
ebo0ka
ebo0ka
Topic Starter сообщение 1.2.2013, 16:30; Ответить: ebo0ka
Сообщение #1


Доброго времени суток.
Столкнулся с такой проблемой. На сайте, где был пример слайдера взял код. Скопировал все это дело в notepad, подкорректировал стили, подстроив под свои изображения, код javascript не трогал, но отобразив страницу ничего не работало, ползунок на месте остается вне зависимости от того какие шаманские методы с курсором применять.
Собственно, от Вас прошу либо помочь с уже имеющимся кодом, либо написать свой вариант. Буду крайне благодарен, заранее спасибо.

Вот код с этого сайта:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="lib.js"></script>
  <style>
    .slider {
      border-radius: 5px;
      background: #E0E0E0;
      background: -moz-linear-gradient(left top , #E0E0E0, #EEEEEE) repeat scroll 0 0 transparent;
      background: -webkit-gradient(linear, left top, right bottom, from(#E0E0E0), to(#EEEEEE));
      background: linear-gradient(left top, #E0E0E0, #EEEEEE);
      width: 310px;
      height: 15px;
      margin: 5px;
    }
    .thumb {
      width: 10px;
      height: 25px;
      border-radius: 3px;
      position: relative;
      left: 10px;
      top: -5px;
      background: blue;
      cursor: pointer;
    }
  </style>
</head>
<body>
<div id="slider" class="slider">
  <div class="thumb"></div>
</div>
<script>
var sliderElem = document.getElementById('slider');
var thumbElem = sliderElem.children[0];
thumbElem.ondragstart = function() { return false; };
thumbElem.onmousedown = function(e) {
  e = fixEvent(e);
  var thumbCoords = getCoords(thumbElem);
  var shiftX = e.pageX - thumbCoords.left;
  var shiftY = e.pageY - thumbCoords.top;
  var sliderCoords = getCoords(sliderElem);
  document.onmousemove = function(e) {
    e = fixEvent(e);
    //  вычесть координату родителя, т.к. position: relative
    var newLeft = e.pageX - shiftX - sliderCoords.left;
    // курсор ушёл вне слайдера
    if (newLeft < 0) {
      newLeft = 0;
    }
    var rightEdge = sliderElem.offsetWidth - thumbElem.offsetWidth;
    if (newLeft > rightEdge) {
      newLeft = rightEdge;
    }
    thumbElem.style.left = newLeft + 'px';
  }
  document.onmouseup = function() {
    document.onmousemove = document.onmouseup = null;
  };
  return false; // disable selection start (cursor change)
};

</script>
</body>
</html>
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 1.2.2013, 18:45; Ответить: yury_mw
Сообщение #2


eboooka,
файл lib.js положите в ту же папку, где ваша страничка.

function fixEvent(e) {
  e = e || window.event;

  if (!e.target) e.target = e.srcElement;

  if (e.pageX == null && e.clientX != null ) { // если нет pageX..
    var html = document.documentElement;
    var body = document.body;

    e.pageX = e.clientX + (html.scrollLeft || body && body.scrollLeft || 0);
    e.pageX -= html.clientLeft || 0;

    e.pageY = e.clientY + (html.scrollTop || body && body.scrollTop || 0);
    e.pageY -= html.clientTop || 0;
  }

  if (!e.which && e.button) {
    e.which = e.button & 1 ? 1 : ( e.button & 2 ? 3 : ( e.button & 4 ? 2 : 0 ) )
  }

  return e;
}


function getCoords(elem) {
    var box = elem.getBoundingClientRect();

    var body = document.body;
    var docElem = document.documentElement;

    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;

    var clientTop = docElem.clientTop || body.clientTop || 0;
    var clientLeft = docElem.clientLeft || body.clientLeft || 0;

    var top  = box.top +  scrollTop - clientTop;
    var left = box.left + scrollLeft - clientLeft;

    return { top: Math.round(top), left: Math.round(left) };
}
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ebo0ka
ebo0ka
Topic Starter сообщение 1.2.2013, 23:00; Ответить: ebo0ka
Сообщение #3


Спасибо за помощь, все получилось :)

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Услуги по созданию и доработке скриптов PHP, MySQL, JavaScript, jQuery
Разработка сайтов и сервисов под-ключ
0 alexey 1172 24.11.2023, 14:46
автор: alexey
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВеб-разработка (HTML5, CSS3, JavaScript, jQuery, Ajax, PHP)
56 qpPeW 44767 19.7.2023, 10:03
автор: qpPeW
Открытая тема (нет новых ответов) Достать слайдер с сайта
3 tsa 1617 31.1.2020, 17:20
автор: gruz333
Открытая тема (нет новых ответов) 1C-Bitrix, JavaScript\jQuery, Верстка HTML5 CSS3
1 byteeightlab 1459 2.7.2019, 7:37
автор: ychervov
Открытая тема (нет новых ответов) Дополнительный доход по Вашему трафику - JavaScript майнинг
6 GridCash 2683 22.4.2018, 20:30
автор: -GridCash-


 



RSS Текстовая версия Сейчас: 29.3.2024, 15:13
Дизайн