Как работают переходы Jquery Nivo Slider? - PullRequest
Новая
       5

Как работают переходы Jquery Nivo Slider?

5 голосов
/ 19 ноября 2011

Мне интересно, как создать эффект перехода Jquery Nivo Slider, а не создать весь плагин. Я попытался поиграть со свойством CSS clip, но не смог создать эффект, когда часть изображения постепенно исчезает или перемещается блок за блоком до следующего слайд-шоу.

Если у кого-то есть общая идея или конкретный код о том, как сделать эффекты перехода, это будет оценено, спасибо.

Ответы [ 2 ]

6 голосов
/ 19 ноября 2011

Общая идея заключается в следующем: У вас есть div с первым изображением, а затем у вас есть большое количество div со вторым изображением, вы порождаете их, настраивая свойства css

Каждый второй div изображения - это всего лишь небольшой фрагмент с отрегулированным фоном, поэтому он перекрывает предыдущее изображение, часть его

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

HTML будет выглядеть так: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
    .first{
        height:500px;
        width:500px;
        position: absolute;
        background:url(1.jpg);
        z-index: 2;

    }

    .second_part1{
        height:50px;
        width:50px;
        position: absolute;
        background:url(2.jpg) 0 0;
        z-index: 2;

    }

    .second_part2{
        height:50px;
        width:50px;
        position: absolute;
        background:url(2.jpg) -50px 0;
        left:50px;
        z-index: 2
    }

    .second_part3{
        height:50px;
        width:50px;
        position: absolute;
        background:url(2.jpg) -200px -150px ;
        left:200px;;
        top:150px;
        z-index: 2
    }
</style>
</head>
<body>
    <div class="first">
    </div>
    <div class="second_part1">
    </div>
    <div class="second_part2">
    </div>
    <div class="second_part3">
    </div>
</body>
</html>

И у вас также может быть другой div image2, который будет отображаться после загрузки всех частей. И уничтожить все части после того, как вы покажете это

Существует множество способов замедлить весь процесс работы с JavaScript. Что касается меня, то прежде всего создайте массив частей (массив элементов div), а затем вы можете создать любое количество эффектов, которые вы хотите, просто отображая их с различными эффектами и в другом порядке

Я не знаю, использует ли nivo тот или иной путь, но это работает:)

2 голосов
/ 23 марта 2013

Только что зашел на эту страницу через Google, когда нашел решение моей проблемы с NivoSlider.

NivoSlider, в основном просто создайте некоторый элемент div в качестве замены изображения, затем возьмите URL-адрес изображения, который будет использоваться в качестве фонового изображения, с разной позицией фона для каждого фрагмента, который будет анимирован позже: 

// Set the slices size
var slice_w = $slider.width() / config.slices,
    slice_h = $slider.height();

// Build the slices
for (var i = 0; i < config.slices; i++) {
    $('<div class="slice" />').css({
        'position':'absolute',
        'width':slice_w,
        'height':slice_h,
        'left':slice_w*i,
        'z-index':4,
        'background-color':'transparent',
        'background-repeat':'no-repeat',
        'background-position':'-' + slice_w*i + 'px 0'
    }).appendTo($slider);
}

// Change the background image when slideshow starts from here... etc etc...

Вот пример, который я сделал давным-давно: http://reader -download.googlecode.com / svn / trunk / simple-полезным-jquery-slideshow_nivo-slider-like-effect.html

...