Слайд с разделением содержимого Jquery

ProgramBox

Слайд с разделением содержимого Jquery

Post author:admin
Запись опубликована:1 мая, 2023
Post category:Вопросы по программированию

#javascript #jquery #jquery-plugins #jquery-selectors

#javascript #jquery #jquery-плагины #jquery-селекторы

Вопрос:

Я хотел сделать

(A) http://jqueryui.com/demos/slider/#side-scroll

(B) http://jqueryui.com/demos/slider/steps.html

Привет всем,

Я создаю настраиваемый слайдер.

Я хотел, чтобы функциональность A и B сочетала оба

1) Поля в A будут относиться к разным тегам / категориям, так что, например, там будет категория Cat, Dog и Snake.

2) Теперь я хотел, чтобы при нажатии на CAT ползунок перемещал ту конкретную картинку, которая связана с тегом, и т. Д

3) Если я перейду к тегу CAT, он просто щелкнет, и появится каталог

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

ИЛИ ЭТО:

http://jqueryui.com/demos/slider/#hotelrooms и http://jqueryui.com/demos/slider/#side-scroll

вместо этого, когда вы нажимаете 3, он переходит к 3CONTENT, когда вы нажимаете 4, он переходит к 4 CONTENT

1. Я не вижу здесь вопроса.

2. Слайд с разделением содержимого Jquery Итак, как я могу заставить скроллер работать с функциональностью привязки, а также, когда я нажимаю на тег, например 1, 2, 3, 4, он переходит в поле, связанное с 1, 2, 3 и т. Д

3. Опубликуйте свой HTML / Javascript на данный момент или, что еще лучше, создайте jsFiddle для использования нами.

4. Ваш вопрос наполовину ясен. Скажите, как указано в (A), скажем, 1 = кошка, 2 = собака и так далее. Когда вы нажимаете на Cat, вы хотите, чтобы ползунок ниже перемещался? Если да, то почему? Какой цели это служит? Возможно, дополнительные пояснения помогут лучше понять ваш сценарий.

Ответ №1:

Вы имеете в виду что-то подобное? Я взял вашу ссылку (A) в качестве примера.

 $(".scroll-content div").click(function () {
                var pos = $(this).position();
                $('.scroll-bar a').animate({ left: pos.left }, 'slow');
            });

Проверьте действие здесь.

Обновление1: Я обновил образец по ссылке выше, если это поможет.

Обновление 2:

Извините, я немного попробовал, но не смог заставить это работать полностью, но вот что у меня есть:

 $(function(){
 $("div#makeMeScrollable").smoothDivScroll();
var ticker;
           $('.scrollingHotSpotRight').mouseover(function () {
               var counter = $(".scroll-bar").slider("value");
               var leftval = 0;
               ticker = setInterval(function () {
                   $(".scroll-bar").slider("value", counter);
                   counter  ;
               }, 35);
           });
           $('.scrollingHotSpotRight').mouseout(clearStop);
           $('.scrollingHotSpotLeft').mouseover(function () {
               var counter = $(".scroll-bar").slider("value");
               ticker = setInterval(function () {
                   $(".scroll-bar").slider("value", counter);
                   counter--;
               }, 35);
           });
           $('.scrollingHotSpotLeft').mouseout(clearStop);

           function clearStop() {
               window.clearInterval(ticker);
           }
});

1. Хорошо, значит, когда пользователь нажимает «Кошка», поля будут перемещаться в положение, с которого начинаются изображения кошек? Ты это имеешь в виду? Если да, то где вы планируете размещать свои теги? Есть ли у вас предлагаемый дизайн (изображение) для того, что вы ищете?

2. эй, я хотел расширить это a-bit…so при наведении курсора мыши на правую сторону … поля перемещаются, включая полосу прокрутки. и если вы наведете курсор на левую часть, он прокручивается назад, он работает, но не полностью, он не перемещает прокрутку назад вместе с ним и не сбрасывает ее пропорционально. вот так: smoothdivscroll.com/basicDemo.htm здесь у меня есть расширенная версия: myislandshop.com/3 2.zip

3. GBS, какие-нибудь мысли помогут?, я опубликовал ZIP-файл своих файлов

4. Я смотрю на это. Это выполнимо, так что дайте мне посмотреть.

5. ПРИВЕТ, GBS, небольшой вопрос, почему, когда я пытаюсь добавить другой тег, такой как tag2 ….. путем дублирования, он не выполняет то же самое, как будто он не работает

Ответ №2:

Все, что вам нужно сделать, это использовать опцию step в реализации полосы прокрутки, если я правильно понимаю ваш вопрос.

 //Modified from the Slider scrollbar demo
var scrollbar = $( ".scroll-bar" ).slider({
        slide: function( event, ui ) {
            if ( scrollContent.width() > scrollPane.width() ) {
                scrollContent.css( "margin-left", Math.round(
                    ui.value / 100 * ( scrollPane.width() - scrollContent.width() )
                )   "px" );
            } else {
                scrollContent.css( "margin-left", 0 );
            }
        },
        step: 50 //<---This
    });

Или вы ищете кого-то, кто напишет всю функциональность того, о чем вы просите?