2 774 Скрипты / Animation

Слайдер на CSS и jQuery

Слайдер на CSS и jQuery

При наведении курсора на изображение, оно сменяется другим. Также есть модификация с добавлением уголка "NEW" и пункта "Цена". Все три варианта можно посмотреть на демо.

HTML

Вот пример HTML кода, включающего и уголок "NEW" и "Цену".

<div class='temp'>
    <div class='temphol'>
        <img src='images/thumb_screen_thumb.jpg' alt='pcvector.net' border='0'/>
        <img src='images/screen_thumb.jpg' class='front' alt='color structure' border='0'/>  <div class='new'></div>
        <a href='#' class='thumb'>pcvector.net</a>
    </div>
    <div class='tempde'>
        <div class='tempname'>pcvector.net</div>
        <div class='tempprice'>$200</div>
        <div class='clear'></div>
    </div>
</div>

JS

Библиотека jQuery и вызов анимации смены слайда помещаем в теги <head>

<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
<script type="text/jаvascript">
    $(function() {
        $('.temphol').hover(function() {
            $(this).children('.front').stop().animate({ "top" : '160px'}, 500);   
        }, function() {
            $(this).children('.front').stop().animate({ "top" : '7px'}, 300);       
        });
    });
</script>

CSS

И вот весь CSS

Скачать 498Загрузок 34,9 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи