Все для web-мастеров и создания сайта. » Полезное, разное » Увеличение картинки при наведении курсора

Увеличение картинки при наведении курсора

  • Новость
  • Похожие новости
Admin в 17час. 10мин. пишет:
Увеличение картинки при наведении курсора


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


Итак начнем:

Первым делом разберем HTML код:


<div id="wrapper">
<h2 class="name">Реализация увеличение картинок при наведении мышки</h2>


    <ul class="gallery">
        <li><a href="image/1.jpg"><img src="image/1.jpg" /></a></li>
        <li><a href="image/2.jpg"><img src="image/2.jpg" /></a></li>
        <li><a href="image/3.jpg"><img src="image/3.jpg" /></a></li>
        <li><a href="image/4.jpg"><img src="image/4.jpg" /></a></li>
        <li><a href="image/5.jpg"><img src="image/5.jpg" /></a></li>
        <li><a href="image/6.jpg"><img src="image/6.jpg" /></a></li>
    </ul>
    
    
    <div id="mainImage">
        <a href="image/1.jpg" title="наша ссылка" target="_blank"><img src="image/1.jpg" alt="Наша картинка" /></a>
    </div>
</div>



CSS:

* {
margin: 0;
padding: 0;
}

img {
border: 0;
}

body {
background: #333;
}

h2.name {
text-align: left;
font: bold 30px/30px Myriad Pro, Arial, Serif;
color: #333;
/* CSS3 */
text-shadow: 0 2px #fff;
padding: 40px 100px 0 100px;
width: 500px;
}

#wrapper {
width: 900px;
height: 500px;
margin: 10px auto 0 auto;
background: #ffee88;

/* CSS3 */

border-radius: 10px;
-webkit-border-radius: 10px;
-opera-border-radius: 10px;
-moz-border-radius: 10px;
}

ul.gallery {
float: left;
margin: 100px 0;
padding: 10px;
width: 360px;
list-style-type: none;
}

ul.gallery li{
float: left;
position: relative;
width: 110px;
height: 110px;
margin: 0;
padding: 5px;
}

ul.gallery li img {
background: #fff;
border: 1px solid #777;
padding: 5px;
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
-ms-interpolation-mode: bicubic;
}



JQuery:

$(document).ready(function() {
$('ul.gallery li').hover(function(){
    $(this).css({'z-index' : '10'});
    $(this).find('img').addClass('hover').stop().animate({
    width: '170px',
    height: '170px',
    padding: '20px',
    marginTop: '-10px',
    marginLeft: '-50px',
    }, 400)},    function() {
    $(this).css({'z-index'    : '0'});
    $(this).find('img').removeClass('hover').stop().animate({
    width: '100px',
    height: '100px',
    padding: '5px',
    marginTop: '0px',
    marginLeft: '0px',
    },400);
        });
        
        
    // делаем отображение основной картинки
    $('ul.gallery li a').click(function() {
     var myImage = $(this).attr('href');
     $('#mainImage img').attr({ src : myImage});
     return false;
});
});

Новый вид topnews

Новый вид topnews


Новый вид вывода популярных новостей с небольшим пред просмотром для Dle.

Хак оформления фото

Хак оформления фото


Клевое оформление фото для вашего сайта.

Хак виджет социальных закладок

Хак виджет социальных закладок


Отличный хак социальных закладок, который подходит да же под HTML страницу!

Поисковая форма для сайта с использованием CSS3

Поисковая форма для сайта с использованием CSS3


Поисковая форма является одним из часто используемых элементов веб интерфейса. Ее реализация на сайте является простым способом повысить привлекательность веб сайта в глазах пользователя. В данном уроке мы создадим стильную форму поиска с использованием особенностей CSS3.


CSS » jQuery » Урок jQuery 4 - Автопрокрутка страницы

 CSS » jQuery » Урок jQuery 4 - Автопрокрутка страницы


Приветствую всех постоянных читателей и гостей на сайте "Всё для вебмастеров и создания сайта". В этой небольшой и достаточно простой статье, я
расскажу вам о создании плавной автоматической прокрутки вверх (полезно для длинных сайтов), реализованной с помощью CSS и jQuery.

Кстати, работу именно этого плагина можно наблюдать на страницах нашего сайта.

Просмотров: 777Дата: 20.10.11
  • Комментарии
  • Вконтакте
  • FaceBook

Какая у вас CMS ?

Datalife Engine
Joomla
Ucoz
Drupal
Wordpress
Другая