сделать фоновое изображение div

Question

сделать фоновое изображение div

0

У меня есть jpg, который имеет высоту 500 пикселей и ширину 50 пикселей. Он состоит из 10 50px x 50px квадратов, каждый из которых содержит число от 1 до 10 (1 в верхней части изображения и 10 внизу). (Jpg находится здесь: http://i39.tinypic.com/mmq4x5.jpg)

Затем у меня есть контейнер размером 50x50 на странице с переполнением, установленным в скрытое. Внутри этого у меня есть 500 high x 50 wide div, который содержит вышеупомянутое изображение в качестве фона.

Всякий раз, когда посетитель нажимает на div, я прокручиваю внутренний div на 50 пикселей, используя jquery animate (снимая 50px с вершины css для внутреннего div. Это дает эффект гладкого счетчика прокрутки.

Все это отлично работает независимо от того, что я не могу понять способ, чтобы при достижении 10 я мог сгладить прокрутку до 1 (IE: оберните вокруг так, чтобы, когда на div нажали 10, число 10 прокручивается вверх и заменяется на номер 1 от верхней части графической прокрутки вверх). Я знаю, что могу проверить верхнюю позицию, и если она находится в правильном месте, просто переустановите ее на 0px, но это заставит ее "прыгать" на 1, а не обертываться. Я мог бы прокрутить длину jpg в обратном направлении, чтобы прокрутить BACK до 1, но это не тот эффект, который я хочу - я хочу, чтобы он выглядел как непрерывный счетчик, который идет от 1 до 10, а затем до 1 снова.

Вот jsFiddle для этого: http://jsfiddle.net/ChrisJones/zTBYe/2/

Может кто-нибудь подумать о том, как это сделать?

Для справки здесь приведен полный код:

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
    #slider{
     width:50px;
     height:500px;
     background: url(numstrip.jpg) no-repeat;
     position:relative;
     top:0px;
    }
    #wrapper{
     width:50px;
     height:50px;
     position:fixed;
     overflow:hidden;
     }
</style>
</head>
<body>
Div is below
<br>
<br>
<div id="wrapper">
    <div id="slider"></div>
</div>
<script type="text/javascript">
 $(document).ready(function () {
     $('#slider').click(function () {
         topPos = parseInt($(this).css("top")) - 50;
         $(this).animate({
             'top': topPos
         }, 200);
     });
 });
</script>
</body>
</html>

Chris Jones 18 сен. 2013, в 16:49

Источник

Теги:

jquery

html

css

scroll

slide

2 ответа

Ещё вопросы

S. S. Rawat · Answer 1 · 2013-09-18T13-47-00.000Z

Попробуйте это, это поможет вам

    $('#slider').click(function () {
        if($(this).css("top")=='-450px')
            topPos = parseInt($(this).css("top")) + 450;
else
    topPos = parseInt($(this).css("top")) - 50;
         $(this).animate({
             'top': topPos
         }, 200);
     });

Скриншот here

mithataydogmus · Answer 2 · 2013-09-18T13-29-00.000Z

0

Добавлен только счетчик и проверен;

 $(document).ready(function () {
     var counter = 1;
     $('#slider').click(function () {
         if(counter == 10)
             topPos = 0;
         else
             topPos = parseInt($(this).css("top")) - 50;
         $(this).animate({
             'top': topPos
         }, 200);
         counter++;
     });
 });

Обновил свою скрипку, вот она.

http://jsfiddle.net/zTBYe/3/

mithataydogmus 18 сен. 2013, в 13:29

0

Цитата из вопроса: « Число 10 прокручивается вверх и заменяется номером 1 сверху прокрутки вверх графика »
Morpheus 18 сен. 2013, в 14:55
0

Вы упомянули, что вы правы. Вы не можете сделать это сейчас. Хорошим подходом может быть нарезка каждого числа на разные div и использование 'background-position'. И на каждом клике вам нужно изменить позиции кликаемого дива и перевести последний див на первый.
mithataydogmus 18 сен. 2013, в 15:00
1

Это то, что я думаю, что для достижения желаемого эффекта мне может понадобиться нарезать отдельные графики 50х50 и использовать 10 делений. Я просто думаю, что есть способ сделать это с одной полосой.
Chris Jones 18 сен. 2013, в 15:19

Показать ещё 1 комментарий