Хаки и Скрипты Next Generation CMS : Изображения : CSS3 и jQuery эффект при наведении на картинку

irbees2008 Опубликовано - 18 - марта Изображения

Адаптировал: irbees2008
Уровень сложности исполнения: нужны навыки css hmlt
Демо:

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

Код:

<ul id="da-thumbs" class="da-thumbs">
    <li>
        <a href="#">
            <img src="images/1.jpg" />
            <div><span>Описание для картинки 1</span></div>
        </a>
    </li>
    <li>
        <!-- ... -->
    </li>
    <!-- ... -->
</ul>

3.Добавляем стили списка ,они будут иметь float:left и position:relative (так как overlay слой будет иметь абсолютное позиционирование):

Код:

.da-thumbs li {
    float: left;
    margin: 5px;
    background: #fff;
    padding: 8px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.da-thumbs li a,
.da-thumbs li a img {
    display: block;
    position: relative;
}
.da-thumbs li a {
    overflow: hidden;
}
.da-thumbs li a div {
    position: absolute;
    background: rgba(75,75,75,0.7);
    width: 100%;
    height: 100%;
}

4.Сам скрипт "ядро" нашего плагина подключаем в head:

Код:

this.$el.on( 'mouseenter.hoverdir, mouseleave.hoverdir', function( event ) {

    var $el = $( this ),
        $hoverElem = $el.find( 'div' ),
        direction = self._getDir( $el, { x : event.pageX, y : event.pageY } ),
        styleCSS = self._getStyle( direction );

    if( event.type === 'mouseenter' ) {

        $hoverElem.hide().css( styleCSS.from );
        clearTimeout( self.tmhover );

        self.tmhover = setTimeout( function() {

            $hoverElem.show( 0, function() {

                var $el = $( this );
                if( self.support ) {
                    $el.css( 'transition', self.transitionProp );
                }
                self._applyAnimation( $el, styleCSS.to, self.options.speed );

            } );


        }, self.options.hoverDelay );

    }
    else {

        if( self.support ) {
            $hoverElem.css( 'transition', self.transitionProp );
        }
        clearTimeout( self.tmhover );
        self._applyAnimation( $hoverElem, styleCSS.from, self.options.speed );

    }

} );

Легко настроить для плагина.Смотрим демо,пишем комменты.

Можешь почитать и вот эту статейку "Ставим адаптивные вкладки на страничку"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.