Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Задание на лабораторную работу №4
«Создание web-страницы со сменяемыми изображениями»
Цель работы: обеспечение использования в web-приложениях графики средствами CSS и jQuery.
1. Создайте web-страницу. Подберите серию фотографий (изображений товаров), которые могут быть объединены единой тематикой. Создайте уменьшенные эскизы всех изображений коллекции. Полноформатные изображения сохраните в папке large, эскизы – в папке small.
В рамках раздела <body> создайте описатель <div class="main">. Внутрь этого элемента вложите другой элемент <div>. Определите его принадлежность классу gallery.
Внутрь элемента <div class="gallery"> вложите серию парных ссылок на эскизы изображений и их оригиналы по образцу, приведенному ниже
<a
href="large/slide1.jpg"><img src="../files/134/small/slide1.jpg" width="70" height="70" alt="land">
</a>
<a
href="large/slide2.jpg"><img src="../files/134/small/slide2.jpg" width="70" height="70" alt="land">
</a>
………………………………………………………………………………………………
В приведенном выше фрагменте парный описатель <a> открывает элемент-ссылку. Его атрибут href хранит значение пути к полноформатному изображению относительно папки текущей web-страницы. Внутрь описателя <a> вложен парный тег-изображение <img>. Такое вложение обеспечивает вид родительского элемента ссылки в виде изображения. Атрибут объекта <img> src указывает на сам графический файл. Параметры width и height определяют размер изображения-ссылки в пикселях. С помощью атрибута alt указывается текст, который отобразится на странице в случае невозможности вызвать на отображение графику.
Создайте текстовый файл site.css со следующим содержанием
#gallery {
float: left;
width: 90px;
margin-right: 30px;
margin-left: 10px;
border-right: white 1px dotted;
}
#gallery img {
display: inline-block;
margin: 0 0 10px 0;
border: 1px solid rgb(0,0,0);
}
#photo {
margin-left: 150px;
position: relative;
}
#photo img {
position: absolute;
}
В приведенном выше файле для элемента с идентификатором gallery устанавливается выравнивание по левому краю, ширина 90 пикселей, отступ справа 30 пикселей, отступ слева 10 пикселей, устанавливается справа пунктирная граница рамки белого цвета шириной 1 пиксель.
Для элемента типа <img> внутри <div id=”gallery”> устанавливаются следующие параметры отображения: изображение генерируется как блочный элемент, которое по отношению к другим элементам ведет себя как встроенный; отступы сверху, справа, снизу и слева соответственно 0, 0, 10, 0 пикселей; граница рамки сплошная черного цвета шириной 1 пиксель.
Для элемента с идентификатором photo устанавливаются отступ слева 150 пикселей и относительное позиционирование.
Для элементов типа <img> внутри <div id=”photo”> устанавливается абсолютное позиционирование.
Добавьте в раздел заголовка web-страницы строку
<link href="site.css" rel="stylesheet">
Данная строка позволяет применять правила, описанные в файле site.css, к элементам текущего документа.
Расположение основных элементов на web-странице отражено на рисунке 1.
Рис. 1
Добавьте в раздел заголовка код документа строку
<script src="../files/134/jquery-1.7.2.min.js"></script>,
позволяющую задействовать возможности библиотеки jQuery.
Добавьте в заголовок также фрагмент
$(document).ready(function() {
}
);
Функция jQuery() или в ее более короткой форме записи — $() - позволяет производить поиск элементов на странице, а также создавать новые элементы по заданному HTML-коду. Возвращает объект jQuery. Объект jQuery — javascript-объект, который содержит коллекцию элементов страницы и обладает множеством методов для работы с ними.
Функция ready() объекта document обеспечивает предварительную загрузку объектов web-страницы. В данном случае ready() – это метод выборки jQuery, в которую вошел весь объект web-страницы document. В качестве аргумента этому методу передается так называемая абстрактная функция function(), не имеющая имени, но которая охватывает своим телом все действия, выполняемые над элементами выборки. Если позволить коду сценария выполняться незамедлительно, сценарии будут обращаться к объектам HTML-кода, еще не созданным физически в оперативной памяти компьютера. Все инструкции сценария теперь следует вкладывать именно внутрь этой функции.
Вам предстоит обработка изображений, расположенных на вашей web-странице в теге <div id=’gallery’>. Для обеспечения их выборки добавьте внутрь функции ready() фрагмент кода
$('#gallery img').each(function(i) {
}
Данный код обеспечивает выборку всех элементов <img>, вложенных в описатель с идентификатором gallery. Добавьте между открывающей и закрывающей фигурными скобками следующую инструкцию
var imgFile = $(this).attr('src');
Здесь в пользовательской переменной сохраняется значение атрибута src текущего элемента выборки. На текущий элемент выборки jQuery указывает элемент this. Такми образом. В переменной imgFile сохраняется путь к изображению, используемому в web-странице. Строкой ниже добавьте приведенный ниже фрагмент
var preloadImage = new Image();
В данной инструкции сохраняется ссылка на вновь созданный объект-изображение. Далее необходимо сохранить в переменной шаблон, соответствующий 3-4 символам в конце слова после точки:
var imgExt = /(\.\w{3,4}$)/;
Следующей ниже инструкцией инициализируется значение атрибута src созданного графического объекта новой строкой, получаемой из значения imgFile.src добавлением в конец первой соответствующей строки суффикса «_h».
preloadImage.src = imgFile.replace(imgExt,'_h$1');
При этом первый аргумент обеспечивает применение функции replace() только к тем строкам, которые соответствуют шаблону imgExt.
Далее к каждому элементу выборки необходимо прикрепить событие hover, объединяющее собой событие наведения указателя на элемент mouseover и снятие указателя с элемента mouseout. Прикрепление события к элементу предполагает наделение его возможностью реагировать на это событие. Добавьте к уже набранному коду фрагмент
$(this).hover(
function() {
$(this).attr('src', preloadImage.src);
},
function () {
var currentSource=$(this).attr('src');
$(this).attr('src', imgFile);
}
);
В данной последовательности инструкций предписывается по наведению указателя присвоить значению атрибута src текущего элемента выборки значению preloadImage.src (первый блок абстрактной функции function()). При этом свойство src элемента this получает значение с суффиксом «_h».
При снятии указателя с текущего элемента (второй блок абстрактной функции function()) атрибут src получает прежнее значение, сохраненное в переменной imgFile.
Завершите блок обработки элементов выборки добавлением закрывающих фигурной и круглой скобок.
Добавьте в код сценария приведенный ниже фрагмент
$('#gallery a').click(function(evt) {
evt.preventDefault();
var imgPath = $(this).attr('href');
var oldImage = $('#photo img');
В первой строке этого фрагмента создается выборка ссылок, содержащихся в элементе div с идентификатором gallery. К каждому элементу этой выборки прикрепляется событие нажатия левой клавиши манипулятора при наведении на элемент. При этом при запуске события обозреватель записывает информацию о нем в так называемом объекте события (Event Object). К информации о событии могут относиться координаты мыши по горизонтали и вертикали, элемент, с которым произошло событие, факт нажатия в момент наступления события клавиши Shift и т.д. В приведенном выше фрагменте таким объектом события является переменная evt и доступен он через абстрактную функцию, созданную для обработки данного события.
Инструкция evt.preventDefault() отменяет предусмотренный по умолчанию способ обработки события нажатия на ссылку, заключающийся в переходе по адресу, указанному в атрибуте href. В строке ниже предписывает сохранить в пользовательской переменной новый путь (с суффиксом «_h»). Последняя строка фрагмента обеспечивает инициализацию создаваемой переменной oldImage ссылкой на элемент div с идентификатором photo, внутри которого есть элемент <img>.
Создайте тег для нового изображения, для чего добавьте к коду строку
var newImage = $('<img src="../files/134/' + imgPath +'">');
Данная строка позволяет сохранить код HTML, обеспечивающий создание нового тега <img> со значением атрибута src, равным значению переменной imgPath. Обратите внимание, что данная инструкция пока не вносит изменений в web-страницу.
Обеспечьте сокрытие нового изображения, добавив к имеющему коду сценария строку. Это действие необходимо для блокирования моментального отображения нового изображения. После сокрытия можно добавлять изображение, которое не будет отображаться, с помощью следующей инструкции
$('#photo').prepend(newImage);
Функция prepend() добавляет элемент, указанный в качестве ее аргумента, в начало элемента <div id=photo>.
Далее обеспечивается постепенное появление в течение одной секунды нового изображения путем выполнения следующей ниже инструкции
newImage.fadeIn(1000);
Добавьте к коду сценария приведенную выше, а также приведенный ниже фрагмент
oldImage.fadeOut(1000,function(){
$(this).remove();
}
);
Функция fadeout() обеспечивает постепенное исчезновение старого изображения в течение 1000 миллисекунд. В качестве второго аргумента функции fadeout указывается функция обратного вызова, выполняемая после завершения эффекта исчезновения и удаляющая тег <img> для данного изображения. Это необходимо для высвобождения ресурсов компьютера. Игнорирование же данной процедуры гарантирует накопление в оперативной памяти скрытых неиспользуемых тегов <img> и замедление работы обозревателя.
Добавьте к коду полученного сценария еще пару закрывающих фигурной и круглой скобки, чем обеспечите закрытие блока обработчика click().
Ниже добавьте строку
$('#gallery a:first').click();
Данная инструкция позволит обеспечить выполнение для первой ссылки, расположенной внутри тега с идентификатором gallery действий, предписанных для обработчика click() выше, то есть исчезновение крупного изображения при загрузке страницы. Отсутствие аргумента при вызове click() обеспечивает выполнение предписанных ранее для этого события инструкций.
Список использованных источников:
1. JavaScript: подробное руководство / Д. Макфарланд ; [пер. с англ., ред. Ф. М. Елистратова]. – М. : Эксмо, 2011. – 608 с. : ил. – (Компьютер на 100 %).
2. JavaScript : the Missing manual. Drop Down Menu. [Электронный ресурс] : демо-версия анимированного меню. - Режим доступа: http://files.sawmac.com/js1e/chapter08/complete _8.3.html, свободный. — Загл. с экрана.
Приложение А
Отображение линий и рамок