Рубрика «JavaScript»

Страница 8 из 14« Первая...«678910»...Последняя »

Плагин Cycle для библиотеки jQuery. Часть 3

28 Октябрь 2008, 13:34

Опции speedIn/speedOut и easeIn/easeOut позволяют более полно управлять эффектом перехода. Фактически, эти опции расширяют возможности опций speed и easing:

$.fn.cycle.defaults = {
    ...
    speed:       1000,  // speed of the transition (any valid fx speed value)
    speedIn:     null,  // speed of the "in" transition
    speedOut:    null,  // speed of the "out" transition
    ...
    easing:      null,  // easing method for both in and out transitions
    easeIn:      null,  // easing for "in" transition
    easeOut:     null,  // easing for "out" transition
    ...
};

Свойства speedIn и easeIn определяют скорость и easing-эффект при появлении следующего кадра. Если эти свойства не определены, они будут установлены в значения speed и easing соответственно.

Свойства speedOut и easeOut определяют скорость и easing-эффект при исчезновении текущего кадра. Если эти свойства не определены, они будут установлены в значения speed и easing соответственно.

Чтобы полностью использовать все возможности плагина Cycle необходимо понять назначение четырех опций:

  • cssBefore - стиль кадра перед его появлением
  • animIn - эффект при появлении нового кадра
  • cssAfter - стиль текущего кадра в момент его исчезновения
  • animOut - эффект при исчезновении текущего кадра

Для использования этих опций установите свойство fx в значение custom.

Если вы создали интересный эффект перехода, то его можно сохранить для дальнейшего использования:

$('#s6').cycle({
    fx: 'custom',
    cssBefore: { 
        top:  0,
        left: 0,
        width: 0,
        height: 0, 
        zIndex: 1 
    },
    animIn:  { 
        width: 200,
        height: 200 
    },
    animOut: { 
        top:  200,
        left: 200,
        width: 0,
        height: 0
    },
    cssAfter: { 
        zIndex: 0 
    }
});

Добавляем функцию:

$.fn.cycle.transitions.pinch = function($cont, $slides, opts) {
    var $el = $($slides[0]);
    var w = $el.width();
    var h = $el.height();
    opts.cssBefore = { top: 0, left: 0, width: 0, height: 0, zIndex: 1 };
    opts.animIn    = { width: w, height: h };
    opts.animOut   = { top: h, left: w, width: 0, height: 0 };
    opts.cssAfter  = { zIndex: 0 };
};

Пример использования:

$('#s1').cycle('pinch');

Опция nowrap запрещает переход к первому кадру после того, как был показан последний кадр.

Ссылки по теме:

Рубрика: JavaScript  |  Ваш отзыв

Плагин Cycle для библиотеки jQuery. Часть 2

27 Октябрь 2008, 13:52

Опция delay устанавливает количество миллисекунд, которые надо добавить к значению timeout при первой смене кадров. Т.е. слайдшоу будет запущено через timeout+delay миллисекунд после загрузки страницы. Эта опция будет полезна, если вы планируете разместить на одной странице несколько слайдшоу, чтобы они запускались по очереди.

Для использования опции easing требуется подключить к странице jQuery Easing Plugin (мы уже сделали это). Опция задает дополнительные эффекты перехода при смене изображений:

  • easein
  • easeinout
  • easeout
  • expoin
  • expoout
  • expoinout
  • bouncein
  • bounceout
  • bounceinout
  • elasin
  • elasout
  • elasinout
  • backin
  • backout
  • backinout
  • linear

Опция sync определяет, как следующий кадр слайдшоу будет заменять текущий. Если используется значение по умолчанию false, следующий кадр появляется после того, как исчезнет текущий. Если использовать значение true, следующий кадр начнет появляться еще до того, как исчезнет предыдущий.

Эффект shuffle сменяет кадры слайдшоу как при перетасовке карт. Для использования эффекта необходимо передать методу cycle() объект настроек, где будет определено свойство shuffle с координатами. Значения по умолчанию:

{ top: 15, left: width_of_container }

Есть возможность организовать смену кадров по щелчку кнопкой мыши. Опции prev и next служат для указания элемента, при щелчке по которому будет показан следующий/предыдущий кадр. Если опция timeout=0, то смена кадров будет происходить только по щелчку кнопкой мыши.

Можно совмещать автоматическую смену кадров (опция timeout не равна нулю) и смену кадров по щелчку кнопкой мыши. На странице демонстрации можно видеть пример, где кадры сменяются автоматически каждые три секунды, просмотр останавливается при наведении указателя мыши, и можно просматривать кадры по щелчку кнопкой мыши.

Опция pager используется для создания панели навигации: можно перейти к любому кадру слайдшоу. Опция предписывает плагину создать панель навигации - контейнер, который содержит ссылки на все кадры слайдшоу.

При использовании опции pager плагин сформирует элементы навигации в виде якорей, для которых можно определить стиль:

#nav a { background-color: #fc0 }

Для активного элемента навигации можно определить класс activeSlide:

#nav a { border: 1px solid #ccc; background: #fc0; text-decoration: none; margin: 0 5px; padding: 3px 5px;  }
#nav a.activeSlide { background: #ea0 }
#nav a:focus { outline: none; }

Чтобы остановить показ слайдшоу, передайте методу cycle() строку ’stop’:

$('#slideshow').cycle('stop');

Чтобы приостановить/продолжить показ слайдшоу, надо передать методу cycle() строку ‘pause’/'resume’:

$('#slideshow').cycle('pause');

Плагин позволяет вызвать пользовательскую функцию перед или после смены кадра:

$('#s5').cycle({
    fx:     'scrollLeft',
    timeout: 5000,
    before:  onBefore,
    after:   onAfter
});

Примеры функций:

function onBefore() {
    $('#output').html("Scrolling image:<br>" + this.src);
}
function onAfter() {
    $('#output').html("Scroll complete for:<br>" + this.src)
        .append('<h3>' + this.alt + '</h3>');
}

Ссылки по теме:

Рубрика: JavaScript  |  Отзывов: 2

Плагин Cycle для библиотеки jQuery. Часть 1

24 Октябрь 2008, 10:11

Плагин Cycle для библиотеки jQuery предназначен для создания слайдшоу на сайте. Небольшой по размеру, но при этом позволяет добавить множество визуальных эффектов при смене кадров. Слайдшоу запускается вызовом метода cycle() для контейнера элементов, участвующих в показе. Хотя я говорю “слайдшоу”, на самом деле можно организовать ротацию любых элементов в контейнере.

Плагин Cyrcle поддерживает множество опций для индивидуальной настройки слайдшоу. Опции по умолчанию могут быть переопределены путем передачи методу cyrcle() объекта, содержащего параметры настройки.

// override these globally if you like
$.fn.cycle.defaults = {
    fx:           'fade', // one of: fade, shuffle, zoom, scrollLeft, etc
    timeout:       4000,  // milliseconds between slide transitions (0 to disable auto advance)
    continuous:    0,     // true to start next transition immediately after current one completes
    speed:         1000,  // speed of the transition (any valid fx speed value)
    speedIn:       null,  // speed of the 'in' transition
    speedOut:      null,  // speed of the 'out' transition
    next:          null,  // id of element to use as click trigger for next slide
    prev:          null,  // id of element to use as click trigger for previous slide
    prevNextClick: null,  // callback fn for prev/next clicks:  function(isNext, zeroBasedSlideIndex, slideElement)
    pager:         null,  // id of element to use as pager container
    pagerClick:    null,  // callback fn for pager clicks:  function(zeroBasedSlideIndex, slideElement)
    pagerEvent:   'click', // event which drives the pager navigation
    pagerAnchorBuilder: null, // callback fn for building anchor links
    before:        null,  // transition callback (scope set to element to be shown)
    after:         null,  // transition callback (scope set to element that was shown)
    end:           null,  // callback invoked when the slideshow terminates (use with autostop or nowrap options)
    easing:        null,  // easing method for both in and out transitions
    easeIn:        null,  // easing for "in" transition
    easeOut:       null,  // easing for "out" transition
    shuffle:       null,  // coords for shuffle animation, ex: { top:15, left: 200 }
    animIn:        null,  // properties that define how the slide animates in
    animOut:       null,  // properties that define how the slide animates out
    cssBefore:     null,  // properties that define the initial state of the slide before transitioning in
    cssAfter:      null,  // properties that defined the state of the slide after transitioning out
    fxFn:          null,  // function used to control the transition
    height:       'auto', // container height
    startingSlide: 0,     // zero-based index of the first slide to be displayed
    sync:          1,     // true if in/out transitions should occur simultaneously
    random:        0,     // true for random, false for sequence (not applicable to shuffle fx)
    fit:           0,     // force slides to fit container
    pause:         0,     // true to enable "pause on hover"
    pauseOnPagerHover: 0, // true to pause when hovering over pager link
    autostop:      0,     // true to end slideshow after X transitions (where X == slide count)
    autostopCount: 0,     // number of transitions (optionally used with autostop to define X)
    delay:         0,     // additional delay (in ms) for first transition (hint: can be negative)
    slideExpr:     null,  // expression for selecting slides (if something other than all children is required)
    cleartype:     0,     // true if clearType corrections should be applied (for IE)
    nowrap:        0      // true to prevent slideshow from wrapping
};

Для начала подключим в разделе head HTML-страницы три JavaScript-файла:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js?v2.11"></script>
<script type="text/javascript" src="js/jquery.easing.1.1.1.js"></script>

HTML и CSS:

<div class="pics">
    <img src="images/beach1.jpg" width="200" height="200" />
    <img src="images/beach2.jpg" width="200" height="200" />
    <img src="images/beach3.jpg" width="200" height="200" />
</div>
.pics { 
    height:  232px; 
    width:   232px; 
    padding: 0; 
    margin:  0; 
}
 
.pics img { 
    padding: 15px; 
    border:  1px solid #ccc; 
    background-color: #eee; 
    width:  200px;
    height: 200px;
    top:  0;
    left: 0
}

Выбираем эффект перехода:

  • blindX
  • blindY
  • blindZ
  • cover
  • curtainX
  • curtainY
  • fade
  • fadeZoom
  • growX
  • growY
  • scrollUp
  • scrollDown
  • scrollLeft
  • scrollRight
  • scrollHorz
  • scrollVert
  • shuffle
  • slideX
  • slideY
  • toss
  • turnUp
  • turnDown
  • turnLeft
  • turnRight
  • uncover
  • wipe
  • zoom

Задать эффект перехода можно либо путем передачи методу cyrcle() строки с названием эффекта, либо передав методу объект настроек, где будет определено свойство fx в значении выбранного эффекта (’cover’, ‘fade’ и т.п.).

$('#s1').cycle('fade');

$('#s2').cycle({
    fx: 'scrollDown'
});

Следующий шаг - выбор скорости смены кадров и продолжительность эффекта перехода:

  • speed - продолжительность в миллисекундах эффекта перехода;
  • timeout - количество миллисекунд между сменами кадров.
$('#s3').cycle({
    fx:    'fade',
    speed:  2500
});
$('#s4').cycle({
    fx:      'scrollDown',
    speed:    300,
    timeout:  2000
});

Кроме упомянутых, можно выбрать множество других опций, например pause и random:

  • pause - остановить слайдшоу при наведении указателя мышки;
  • random - показывать картинки в случайном порядке.
$('#s5').cycle({
    fx:    'fade',
    pause:  1
});
$('#s6').cycle({
    fx:     'scrollDown',
    random:  1
});

Ссылки по теме:

Рубрика: JavaScript  |  1 отзыв
Страница 8 из 14« Первая...«678910»...Последняя »