jQuery - бесконечно прокручивать и зацикливать одно изображение внутри div - PullRequest
Новая
       27

jQuery - бесконечно прокручивать и зацикливать одно изображение внутри div

1 голос
/ 02 ноября 2011

Я хотел бы создать автоматически прокручиваемое изображение внутри div. Например, у меня есть изображение шириной 600px и высотой 1200px, и я хотел бы отобразить его внутри div на 600px на 200px и сделать так, чтобы оно прокручивалось и повторялось бесконечно. все плагины jQuery, которые я пробовал, предназначены для прокрутки нескольких элементов li, и я не смог приспособить их под свои нужды. поэтому я попытался разделить изображение на несколько частей, но это выглядит просто ужасно. какие-нибудь указатели? 

<style type="text/css">
  #autoscroll {
    max-height: 100px;
    overflow: hidden;
  }
</style>
...
<div id="autoscroll">
  <img src="someimage.jpg">
</div>

Ответы [ 4 ]

7 голосов
/ 02 ноября 2011

Установите контейнер с overflow, установленным на hidden и размерами, которые вы хотите отобразить. Затем добавьте ваше изображение как дочерний элемент этого контейнера и анимируйте его положение:

HTML 

<div id="container">
    <img src="src_of/img.jpg" width="600" height="1200" />
</div>

CSS 

#container {
    position : relative;
    width    : 600px;
    height   : 200px;
    overflow : hidden;
}

#container > img {
    position : absolute;
    top      : 0;
    left     : 0;
}

JS 

$(function () {
    var $image = $('#container').children('img');
    function animate_img() {
        if ($image.css('top') == '0px') {
            $image.animate({top: '-1000px'}, 2500, function () {
                animate_img();
            });
        } else {
            $image.animate({top: '0px'}, 2500, function () {
                animate_img();
            });
        }
    }
    animate_img();
});

Обратите внимание, что анимация top изображения отрицательна относительно высоты изображения минус высота контейнера ((container.height () - image.height ()) * -1).

Вот jsfiddle вышеуказанного решения: http://jsfiddle.net/J9BM8/1/

2 голосов
/ 28 октября 2015

обновление ответа @ Джаспера.

время прокрутки регулируется как высота изображения, а также верхняя прокрутка. Top и Scroll time являются динамическими http://jsfiddle.net/J9BM8/476/

HTML 

<div id="container">
<img src="https://d98b8t1nnulk5.cloudfront.net/production/images/layout/devices/default/ios_iPhone-5S_7.0_portrait.jpg?1445944951" width="320" />

JS 

$(function () {
var $image = $('#container').children('img');
function animate_img() {
    if ($image.css('top') == '0px') {
        $image.animate({top: -($image.height()-468)+"px"}, $image.height()*5, function () {
            animate_img();
        });
    } else {
        $image.animate({top: '0px'}, $image.height()*5, function () {
            animate_img();
        });
    }
}
animate_img();

});

0 голосов
/ 02 ноября 2011

Вы можете попробовать установить изображение в качестве фона div (вместо использования тега img и поместить изображение внутри div), а затем анимировать фоновые координаты изображения с помощью jQuery через свойство background-position css.

У меня нет кода, но это не сложно реализовать, и оно должно работать.

0 голосов
/ 02 ноября 2011

Установить изображение в качестве повторяющегося фона, как 

 #autoscroll {
   background-image: url('someimage.jpg');
   background-repeat: repeat-y;
 }

и анимируйте положение фона.

...