Пропустить навигацию

Практика 9

Задание

  1. Создайте страницу с таблицей 7х7, заполните ее случайными целыми числами от 1 до 100. Создайте с помощью jQuery скрипт, который будет менять цвет фона ячеек, числовое значение в которых строго меньше числа 55.
  2. Разберите страницу «Image_slider.html», на которой располагаются три изображения, которые появляются при наведении на них курсора. Эффект анимации применяется ко всем <div> элементам с классом wrap. Модифицируйте код следующим образом:  добавьте еще два ряда изображений по три элемента в каждом. Для показа каждого изображения используйте разные эффекты анимации jQuery на ваш выбор.
  3. Создайте страницу с фреймовой разметкой, содержащую левый и правый фреймы. В левом фрейме размещается выпадающее меню с любыми тремя предыдущими практическими занятиями (menu.html), в каждом практическом занятии – ссылки на любые два задания из данных занятий, в правом фрейме – страницы, которые соответствуют этим ссылкам.

Исходный код:

файл menu.html

<style>
#theMenu, #theMenu ul { list-style:none; width:15em;margin:0;padding:0; }
#theMenu a { background:#F6F6F6; color:#010101;
display:block; font-weight:bold; padding:0.5em 1em; text-decoration:none;
border:1px solid #DFDFDF;
}
#theMenu ul a { background:#F6F6F6; color:#010101;
font-weight:normal; text-decoration:none;
}
#theMenu ul a:hover { background:#F0EBE1; text-decoration:underline; color:#711515; }
</style>
<body>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#theMenu > li > a").not(":first").find("+ ul").slideUp(1);
$("#theMenu > li > a").click(function () {
$(this).find("+ ul").slideToggle("fast");
});
});
</script>
<ul id="theMenu">
<li><a title="open or close this section" href="#">Практика 2</a>
<ul>
<li><a href="#">Задание 3</a></li>
<li><a href="#">Задание 4</a></li>
</ul>
</li>
<li><a title="open or close this section" href="#">Практика 5</a>
<ul>
<li><a href="#">Задание 2</a></li>
<li><a href="#">Задание 3</a></li>
<li><a href="#">Задание 4</a></li>
</ul>
</li>
</ul>