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

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

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

Всякий раза, когда посетитель нажимает на DIV, я прокрутка внутреннего Div вверх на 50 пикселов с помощью Jquery одушевленного (принимая 50px от CSS верхней части для внутренних дел. Это дает эффект гладкого прилавка прокрутки.

Все это отлично работает, так как я не могу понять способ, чтобы при достижении 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>

источник

2013-09-18 Chris Jones

попробовать это http://jsfiddle.net/zTBYe/8/ – Morpheus

Я работал его, но до сих пор нужна какая-то помощь :) Что я сделал - это использовать img-тег во внутреннем div, а не иметь изображение в качестве фона div. Я помещаю div как обычно. Когда div достигает 10, я изменяю содержимое внутреннего div, чтобы он имел 2 полосы изображения друг над другом и продолжал прокрутку. На следующей итерации 50px я удаляю верхнее изображение из раздела div и reset css «top» и так далее ... Вот еще один jsFiddle: http://jsfiddle.net/ChrisJones/7xBE4/3/ ОДНАКО .. Теперь мне нужно, чтобы это работало в другом направлении (считайте от 10 до 1 и прокручивайте UP, а не вниз - может кто-нибудь помочь :) :) –

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

$(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/

источник

2013-09-18 14:54:32 mithataydogmus

Цитата из вопроса: «_ число 10 прокручивается вверх и заменяется номером 1 от в верхней части графической прокрутки вверх ». – Morpheus

Вы упомянули, что вы правы. Вы не можете так сделать сейчас. Хороший подход может нарезать каждое число как разные div и использовать «background-position». И на каждом клике вам нужно изменить нажатые позиции div и сначала взять div. – mithataydogmus

Это то, что я, хотя mithataydogmus, чтобы добиться эффекта, который я хочу, мне, возможно, придется нарезать отдельные графики размером 50x50 и использовать 10 div. Я просто, хотя может быть способ сделать это с помощью одной полосы. –

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

$('#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

источник

2013-09-18 15:06:41

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

ответ

Смежные вопросы