Uchebno-metodicheskoe_posobie
.pdf
<section class="main"> <ul class="ch-grid"> <li>
<div class="ch-item"> <div class="ch-info">
<div class="ch-info-front ch-img-1"></div> <div class="ch-info-back">
<h3> Кнопка </h3> </div></div></div></div> </li></ul></section>
Далее необходимо сделать её более красочной используя CSS:
|
|
ch-grid |
.ch-grid:after |
{ |
{ |
margin: 20px 0 0 0; |
clear: both; |
padding: 0; |
} |
list-style: none; |
.ch-grid li |
display: block; |
{ |
text-align: center; |
width: 220px; |
width: 100%; |
height: 220px; |
} |
display: inline-block; |
.ch-grid:after, |
margin: 20px; |
.ch-item:before |
} |
{ |
.ch-item |
content: ''; |
{ |
display: table; |
width: 100%; |
} |
height: 100%; |
|
|
|
|
border-radius: 50%; |
{ |
position: relative; |
display: block; |
cursor: default; |
position: absolute; |
-webkit-perspective: |
width: 100%; |
900px; |
height: 100%; |
-moz-perspective: |
border-radius: 50%; |
900px; |
background-position: |
-o-perspective: 900px; |
center center; |
-ms-perspective: 900px; |
-webkit-transition: all |
perspective: 900px; |
0.4s linear; |
} |
-moz-transition: all 0.4s |
.ch-info |
linear; |
{ |
-o-transition: all 0.4s |
position: absolute; |
linear; |
width: 100%; |
-ms-transition: all 0.4s |
height: 100%; |
linear; |
-webkit-transform- |
transition: all 0.4s |
style: preserve-3d; |
linear; |
-moz-transform-style: |
-webkit-transform- |
preserve-3d; |
origin: 50% 0%; |
-o-transform-style: |
-moz-transform-origin: |
preserve-3d; |
50% 0%; |
-ms-transform-style: |
-o-transform-origin: |
preserve-3d; |
50% 0%; |
transform-style: |
-ms-transform-origin: |
preserve-3d; |
50% 0%; |
} |
transform-origin: 50% |
.ch-info > div |
0%; |
} |
40 |
41 |
|
|
.ch-info .ch-info-front |
.ch-img-1 |
{ |
{ |
box-shadow: inset 0 0 0 |
background-image: |
16px rgba(0,0,0,0.3); |
url(/*Cсылка на картинку); |
} |
.ch-info h3 |
.ch-info .ch-info-back |
{ |
{ |
color: #fff; |
-webkit-transform: |
text-transform: |
translate3d(0,0,-220px) |
uppercase; |
rotate3d(1,0,0,90deg); |
letter-spacing: |
-moz-transform: |
2px; |
translate3d(0,0,-220px) |
font-size: 24px; |
rotate3d(1,0,0,90deg); |
margin: 0 15px; |
-o-transform: |
padding: 60px 0 |
translate3d(0,0,-220px) |
0 0; |
rotate3d(1,0,0,90deg); |
height: 110px; |
-ms-transform: |
font-family: |
translate3d(0,0,-220px) |
‘Open Sans’,Arial, sans-serif; |
rotate3d(1,0,0,90deg); |
text-shadow: |
transform: |
0 0 1px #fff, |
translate3d(0,0,-220px) |
0 1px 2px rgba(0,0,0,0.3); |
rotate3d(1,0,0,90deg); |
} |
background: #000; |
font-style: italic; |
opacity: 0; |
margin: 0 30px; |
} |
font-size: 12px; |
ch-info p |
border-top: 1px solid |
{ |
rgba(255,255,255,0.5); |
color: #fff; |
} |
padding: 10px 5px; |
|
|
|
.ch-info p a |
rotate3d(1,0,0,-90deg); |
{ |
-o-transform: |
display: block; |
translate3d(0,280px,0) |
color: #fff; |
rotate3d(1,0,0,-90deg); |
color: |
-ms-transform: |
rgba(255,255,255,0.7); |
translate3d(0,280px,0) |
font-style: normal; |
rotate3d(1,0,0,-90deg); |
font-weight: 700; |
transform: |
text-transform: |
translate3d(0,280px,0) |
uppercase; |
rotate3d(1,0,0,-90deg); |
font-size: 9px; |
opacity: 0; |
letter-spacing: 1px; |
} |
padding-top: 4px; |
.ch-item:hover .ch-info-back |
font-family: ‘Open |
{ |
Sans’,Arial, sans-serif; |
-webkit-transform: |
} |
rotate3d(1,0,0,0deg); |
.ch-info p a:hover |
-moz-transform: |
{ |
rotate3d(1,0,0,0deg); |
color: #fff222; |
-o-transform: |
color: rgba(255,242,34, |
rotate3d(1,0,0,0deg); |
0.8); |
-ms-transform: |
} |
rotate3d(1,0,0,0deg); |
.ch-item:hover .ch-info-front |
transform: |
{ |
rotate3d(1,0,0,0deg); |
-webkit-transform: |
opacity: 1; |
translate3d(0,280px,0) |
} |
rotate3d(1,0,0,-90deg); |
|
-moz-transform: |
|
translate3d(0,280px,0) |
|
42 |
43 |
В данном примере кнопка «переворачивается», это даёт возможность размещать на ней текст с двух сторон и делает её более информативной и, что немаловажно, она стильно смотрится на веб-странице.
2.5 Галерея фотографий
Создадим простую галерею фотографий и отобразим ее создание в поэтапной инструкции:
1. Создадим html документ и назовем его: index. html. В нем напишем следующее:
<html>
<head>
<script src="jquery-2.1.3.js"></script> //Подключаем JQuery
<title>Галерея фотографий</title> //Название страни-
цы
</head> <body > <center>
<img src="" width="640" height="480" id="img"/><br /> //Контейнер для изображений
//Следующие ссылки это элементы переключения изображений
<a href="#" onClick="javascript: left_ arrow()">Предыдущая</a>
<a href="#" onClick="javascript: right_ arrow()">Следующая</a>
</center>
<script src="galery.js"></script> //Подключаем javascript
</body>
</html>
Мы создаем картинку с размером «640x480». Фиксированный размер задаем для того, чтобы изображение не смещалось, если оно будет иметь больший размер.
Затем добавляем 2 ссылки переключения изображений (Следующая и Предыдущая) на которые накладываем 2 события(onClick).
2. Создадим файл galery.js. В нем напишем несколько функций:
var mas = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"] // массив картинок
var to = -1; // Счетчик, указывающий на текущую картинки
function right_arrow() // Открытие следующей картинки(движение вправо)
{
var obj = $("#img"); //Присваеваем переменной элемент if (to < mas.length-1) to++ //Если переменная to меньше длины массива тогда to увеличиваем на 1, если меньше то присваеваем 0 (то есть отправляем в начало массива) else
to = 0;
44 |
45 |
obj.attr("src", mas[to]); //Меняем значение ссылки на изображение в элементе на нужное
}
function left_arrow() // Открытие предыдущей картинки(движение влево)
{
var obj = $("#img"); if (to > 0) to--;
else
to = mas.length-1; obj.attr("src", mas[to]);
}
right_arrow(); //Запускаем движение вправо для отображения первой картинки при открытии страницы
Рис. 7 Визуалное представление галереи фотографий в окне браузера
2.6 Прокрутка html-страницы методами JQuery
Кнопка прокрутки
Разберем, как с помощью jQuery сделать проявляющуюся кнопку прокрутки к началу страницы. При небольшом скроллинге в правом нижнем углу страницы (или любом другом месте) будет проявляться кнопка (сделаем ее в виде картинки) с надписью или без нее, при клике на которую страница будет плавно прокручиваться к началу. После того, как страница окажется прокрученной до начала,кнопка исчезнет.
1. Создаем документ и подключаем файлы
Если действовать по всем правилам, к нашей странице следует подключить 3 файла:
Таблицу CSS стилей – подключаем в <head>; Файл библиотеки jQuery – можно подключить в са-
мом конце <body> — тогда он будет подгружаться после загрузки контента, что нам, в общем, и нужно.
Собственно файл скрипта, который будет выполнять скроллинг – его подключаем после файла jQuery.
Все содержимое для удобства поместим в блок
#content
Получилось вот так:
<!DOCTYPE HTML> <html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" /> <meta charset="utf-8" />
<title>Кнопка прокрутки к началу страницы</title>
46 |
47 |
</head>
<body>
<div id="content"><p>Длинный-длинный контент</p></ div>
<script src="jquery.js" type="text/javascript"></script> <script src="scroll.js" type="text/javascript"></script> </body>
</html>
2. Прописываем стили
Для блока #content пропишем хорошую высоту, чтобы получить полосы прокрутки, и рамку – просто, чтобы посмотреть на него.
Роль кнопки будет выполнять <div> #arrow. Ему мы зададим ширину и высоту, фоновую картинку (в целях обучения, без нее можно вполне обойтись) и position: fixed. В начале кнопку мы не видим, поэтому display: none
#content
{
height: 4200px; border: 1px solid red;
}
#arrow
{
background: transparent url(up.png) no-repeat; width: 60px;
height: 40px; position: fixed; bottom: 10px; right: 40px;
cursor: pointer; /*рисуем ручку при наведении, так привычнее*/
display: none;
}
Закомментируйте пока display: none, чтобы удостовериться, что все получилось, и кнопка сидит на нужном месте.
3. Пишем скрипт
Первым делом создадим наш блок-кнопку с помощью jQuery и поместим ее на страницу. Место расположения не особенно важно, потому что кнопка имеет position: fixed, а значит, не находится в нормальном потоке. Запихнем ее сразу после контента, для этого можно использовать один из восьми методов вставки элементов на страницу, например, метод insertAfter(). Не забываем обернуть весь код в document-ready.
$(document).ready(function()
{
$('<div id="arrow">up</div>').insertAfter('#content');
});
Заметим, что этот шаг мы могли бы не делать, если бы прописали <div> прямо в HTML. Но лучше не засорять HTML непонятным и лишним на первый взгляд кодом. Пусть блок, с которым работает только jQuery, и
48 |
49 |
порождает сам jQuery.
Теперь, когда мы создали блок, можно привязать к нему обработчик события.
$('#arrow').click(function()
{
$('html, body').animate(
{
scrollTop: 0 }, 'slow')
});
Прокручивать мы должны элемент html. Но для того, чтобы скрипт работал и в режиме совместимости, добавляем к селектору еще и элемент body.
4. Изменяем внешний вид
Кнопка #arrow нам нужна только тогда, когда мы прокрутили страницу на какое-то расстояние. Поэтому давайте будем показывать ее только тогда, когда страница прокручена уже, скажем, на 400 пикселей, а если прокрутка меньше, то кнопку будем прятать.
Реализуем все это с помощью отслеживания события scroll, которое возникает при каждом взаимодействии с полосой прокрутки (будь то сдвиг её мышкой, или с помощью колеса мыши, или стрелками на клавиатуре).
$(window).scroll(function()
{
if ($(this).scrollTop() >= 400)
{
$('#arrow').fadeIn();
}
else
{
$('#arrow').fadeOut();
};
});
Каждый раз, когда окно прокручивается, если оно прокручено на 400 пикселей и больше от начала – плавно проявляем (fadeIn) кнопку arrow. А если оно прокручено меньше, чем на 400px, плавно ее скрываем (fadeOut).
Не забудьте раскомментировать «display: none» в стилях.
Поместим этот код между строчкой создания кнопки и обработчиком ее нажатия.
$(document).ready(function()
{
$('<div id="arrow">up</div>').insertAfter('#content'); $(window).scroll(function()
{
if ($(this).scrollTop() >= 400)
{
$('#arrow').fadeIn();
}
else
{
$('#arrow').fadeOut();
50 |
51 |
};
}); $('#arrow').click(function()
{
$('html, body').animate(
{
scrollTop: 0 }, 'slow')
})
});
Плавная прокрутка веб-страницы к нужному элементу или якорю.
Якорь - закладка с уникальным именем в любом месте веб-странице, предназначенная для создания перехода к ней по ссылке. Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу.
Для создания якоря следует вначале сделать закладку в соответствующем месте и дать ей имя при помощи атрибута name тега <a>. В качестве значения href для перехода к этому якорю используется имя закладки с символом решетки "#" впереди:
<div class="top_menu"><a name="top"></a></div> <div id="content">Some content here</div>
<a href="#top">Go to page top</a>
Скрипт должен срабатывать по клику на ссылках, у которых атрибут href начинается с решетки "#". В jQuery
это сделаем так:
$('a[href^="#"]').click(function()
{//Сохраняем значение атрибута href в переменной: var target = $(this).attr('href');
$('html, body').animate(
{
scrollTop: $(target).offset().top }, 800);
return false;
});
Для изменения значения отступа прокрутки сверху используется метод scrollTop. offset().top определяет значение отступа сверху для якоря (с id равному значению атрибута href), которое устанавливается в scrollTop.
Плавность реализует функция animate.
В конце не забываем поставить return false; для отмены действия по умолчанию.
Скрипт можно разместить в HTML странице заключив в тег script или же подключить отдельным файлом (с расширением js) что позволит использовать это на всех страницах нашего сайта.
52 |
53 |
Заключение
В данном методическом пособии быи представлены лишь некоторые методы, при помощи которых можно создать хороший, крсочный сайт под управлением JQuery приложений. Таких методов и технологий настолько много, что для полного их описания не хватит и тысячи страниц, тем более, что каждый день кто-то придумывает новый способ использования тех или иных методов.
Хотелось бы отметить, что JQuery лишь один из многих языков, которые уместно использовать для создания программынх приложений, как для сайтов, так и для использования на персональном компьютере или мобильном девайсе. Мы обратили внимание именно на этот язык из-за его практической удобности, наличии большого количества возможностей и привязанности этого языка к курсу «Интернет-программирование».
Надеемся, что наше пособие поможет Вам в создании своего собстенного сайта!
54
