Дизайн, дизайн, дизайн. Хороший дизайн — это весьма обстоятельство, которое нужно учитывать при разработке сайта. Именно с него, как правило, у посетителей формируется первое впечатление о вашем проекте.
Однако, когда вы приносите интерактив на страницы — у пользователя возникает неподдельный интерес, эдакое естественное любопытство! Пользуйтесь этим в своих будущих проектах. И пытайтесь подавать дизайн и интерактив вместе, так шансов у Вас гораздо больше.
Руководствуясь этими словами я и решил действовать.
Унылую картинку мы сейчас расшевелим.
Скажу сразу, статья ориентирована на новичков в JQuery.
Итак, начнем от обратного, хочу чтобы итог был таков:
но это результат, наша задача — использовать и понимать JQuery. На чем и заострим внимание:
А что собственно нам нужно?
1) разбить картинку на квадратики,
2) Cделать скругленные углы
3) Хочу! хочу чтоб «это» отзывалось на мои действия.
Ну что-ж, обо всем по порядку:
Сначала сделаем скелет страницы:
Однако, когда вы приносите интерактив на страницы — у пользователя возникает неподдельный интерес, эдакое естественное любопытство! Пользуйтесь этим в своих будущих проектах. И пытайтесь подавать дизайн и интерактив вместе, так шансов у Вас гораздо больше.
Руководствуясь этими словами я и решил действовать.
Унылую картинку мы сейчас расшевелим.
Скажу сразу, статья ориентирована на новичков в JQuery.
Итак, начнем от обратного, хочу чтобы итог был таков:
но это результат, наша задача — использовать и понимать JQuery. На чем и заострим внимание:
А что собственно нам нужно?
1) разбить картинку на квадратики,
2) Cделать скругленные углы
3) Хочу! хочу чтоб «это» отзывалось на мои действия.
Ну что-ж, обо всем по порядку:
Сначала сделаем скелет страницы:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <title>JQuery Box</title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf8">
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
- <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
- <!--подключаем UI так как используем метод animate-->
- <script type="text/javascript">
- jQuery(document).ready(function() {
- // Здесь располагается код, который будет выполняться при загрузке DOM страницы
- });
- </script>
- <style type="text/css">
- *{margin:0; padding:0; border:0px solid red;}
- </style>
- </head>
- <body>
- <div align="center"><!-- центрируем -->
- <div id="image_top" class="image_0">
- <!-- сюда будем вставлять блоки, замостим ими все пространство рисунка -->
- </div>
- </div>
- </body>
- </html>
* This source code was highlighted with Source Code Highlighter.
В нем ничего особенного нет. Многие текстовые редакторы дают такую же «пустую» html страницу.
Теперь разместим в «style» блок
#image_top {width: 780px; height: 230px;} /* Определяем размеры блока рисунка */<br>.image_0{ background: url('background.jpg');} /* создаем класс, при необходимости сможем изменить background блока, просто поменяв данный либо сам класс, либо его атрибуты */<br><br>* This source code was highlighted with Source Code Highlighter.
Далее, замостим её сверху квадратными блоками, как видите на рисунке сверху, только грани эти естественно — невидимые.
Но делать мы это будем после загрузки DOM, а сейчас только пропишем стили для этих блоков:
div.overlay_box { width: 78px; height:78px; float:left; background: url('overlay_cube_78.png');} <br>/* Задаем размеры "кирпичикам", что будут мостить наш рисунок, В данном случае мы нарисовали квадраты, со скругленными уголками */<br>div.overlay_box_in {background: white; width: 78px; height:78px; display:block; opacity:0; filter: alpha(opacity=00);}<br>/* задаем параметры для блока, вложенного в блок с рисунком png. */<br><br>* This source code was highlighted with Source Code Highlighter.
По сути мы в один блок вписываем другой, с таким фоновым рисунком
Да, png — штука удобная. Здесь мы рисуем квадрат с закругленными углами.
В принципе, мы можем нарисовать что душе угодно: звездочки, машинки, силуеты…
Размер повторяющихся блоков подбираем таким образом, чтобы они вписались в блок #image_top, иначе по краям останутся эдакие обрубки.
В итоге получим:
а теперь нам нужно предусмотреть как картинка будет реагировать на наши действия.
Самым разумным предложением — это чтобы наши квадраты реагировали на мышь. Когда мышь — располагается в зоне квадрата, он должен изменять свое состояние.
В нашем случае сделаем так, чтобы квадрат целиком был белым.
Добъемся этого с помощью hover.
Не забываем вернуть все к исходному состоянию.
А вот, собственно и ВЕСЬ код этого эффекта:
jQuery(document).ready(function() {
for (var i=0; i<30; i++) // в нашу картинку поместятся 30 таких "боксов"
{ $('#image_top').append('<div class="overlay_box"><div class="overlay_box_in"></div>');
}
$('div.overlay_box_in').hover(
function(){$(this).stop().css('opacity','0.9')},
// Первая функция делает блок, над которым сейчас находится мышь практически непрозрачным - белым
// Для того чтобы не создавалось «очереди», когда мышь проходит снова над квадратом, а анимация еще не завершилась, добавляем в начало stop().
function(){$(this).animate({opacity: 0.0},1500, 'linear')}
// а здесь вторая функция (вызываемая после того как мышь покинет текущий квадрат) делает блок снова прозрачным
);
});
* This source code was highlighted with Source Code Highlighter.
Вот и все.
DEMO здесь
Все целиком можете скачать отсюда:
Надеюсь, Вам помогла эта статья в понимании Jquery.