Разработка сайта автоматизированного тестирования: оформление сайта с использованием CSS
Дипломная работа - Компьютеры, программирование
Другие дипломы по предмету Компьютеры, программирование
три с классом "content":
247760 г. Мозырь, ул. Студенческая, 28, Республика Беларусь
(02351) 2-43-14 (приемная ректора), 2-43-17 (приемная комиссия)
(02351) 2-54-26
mozvuz@mail.gomel.by
от ж/д Мозырь автоб. 2, Козенки автоб. 16, Калинковичи автоб. 201, от автовокзала Мозырь автоб. 2, 3А, 4, 5, 21 до остановки Примостовая
Немного CSS:
.slideBox {: 400px;: 320px;: absolute;: left;left: 25%;top: 55%;: hidden;: 5px solid #bc688c;
}
.slideBox img {: absolute;index: 2;: 400px;: 320px;
}
.slideBox div.content {: absolute;
index: 1;: 10px;
}
Итог:
Рисунок 2.5.1 - изображение на странице О нас
И при наведении курсора мыши:
Рисунок 2.5.2 -при наведении курсора мыши
2.6 Создание 3D галереи
Изображения размещаются в папке images и при запуске скрипта их надо указать для загрузки. Кроме того, к изображению можно привязать ссылку, которая работает и как подпись к картинке
Галерея использует средства только JavaScript, без подключения каких-либо библиотек.
HTML
Элемент div screen содержит всю галерею. Элемент div command содержит подпись и панель управления галереей div bar. Элемент div urlInfo будет выводить на ссылку, привязанную к изображению.
CSS
html {: hidden;
}{: absolute;: 0px;: 0px;: #eee;: 100%;: 100%;: #fff;family: arial;size: 0.8em;
}
#screen {: absolute;: 100%;: 100%;: #7addfd;: hidden;
}
#screen img, canvas {: absolute;: -9999px;: pointer;rendering: optimizeSpeed;
}
#screen .href {: #FFF dotted 1px;
}
#screen .fog {: absolute;: #fff;: 0.1;: alpha(opacity=10);
}
#command {:absolute;: 1em;: 1em;: 130px;index: 30000;:#7addfd;: #7addfd solid 1em;
}
#bar {:relative;: 1em;: 1em;: 160px;
}
#bar .button {: absolute;: #222;: 20px;: 20px;: pointer;
}
#bar .loaded {: #666;
}
#bar .viewed {: #fff;
}
#bar .selected {: #f00;
}
#urlInfo {: absolute;: url(images/r.gif) no-repeat 0 4px;: hidden;index: 30000;left: 12px;: pointer;
}
JavaScript
var m3D = function () {
/* ---- Переменные ---- */
var diapo = [],
imb,
scr,
bar,,,= "",= {x:0, y:0, z:-650, s:0, fov: 500}, = 0,
nh = 0;
/* ==== метод сдвоенной камеры ==== */
camera.setTarget = function (c0, t1, p) {(Math.abs(t1 - c0) > .1) {.s = 1;.p = 0;.d = t1 - c0;(p) {.d *= 2;.p = 9;
}
}
}.tween = function (v) {(camera.s != 0) {.p += camera.s;[v] += camera.d * camera.p * .01;(camera.p == 10) camera.s = -1;if (camera.p == 0) camera.s = 0;
}camera.s;
}
/* ==== Конструктор diapo ==== */Diapo = function (n, img, x, y, z) {(img) {.url = img.url;.title = img.title;.color = img.color;.isLoaded = false;(document.createElement("canvas").getContext) {
/* ---- используем элемент canvas вместо изображения (трюк для производительности) ---- */
this.srcImg = new Image();.srcImg.src = imagesPath + img.src;.img = document.createElement("canvas");.canvas = true;.appendChild(this.img);
} else {
/* ---- обычное изображение ---- */.img = document.createElement('img');.img.src = imagesPath + img.src;.appendChild(this.img);
}
/* ---- обработка событие onclick ---- */.img.onclick = function () {(camera.s) return;(this.diapo.isLoaded) {(this.diapo.urlActive) {
/* ---- гиперссылка для перехода ---- */.location.href = this.diapo.url;
} else {
/* ---- позиционирование цели ---- */.tz = this.diapo.z - camera.fov;.tx = this.diapo.x;.ty = this.diapo.y;
/* ---- disable previously selected img ---- */(selected) {.but.className = "button viewed";.img.className = "";.img.style.cursor = "pointer";.urlActive = false;.style.visibility = "hidden";
}
/* ---- выбираем текущее изображение ---- */.diapo.but.className = "button selected";(false);= this.diapo;
}
}
}
/* ---- кнопки панели управления ---- */.but = document.createElement('div');.but.className = "button";.appendChild(this.but);.but.diapo = this;.but.style.left = Math.round((this.but.offsetWidth * 1.2) * (n % 4)) + 'px';.but.style.top = Math.round((this.but.offsetHeight * 1.2) * Math.floor(n / 4)) + 'px';.but.onclick = this.img.onclick;= this.img;.img.diapo = this;.zi = 25000;
} else {
/* ---- прозрачный элемент div ---- */.img = document.createElement('div');.isLoaded = true;.img.className = "fog";.appendChild(this.img);.w = 300;.h = 300;
this.zi = 15000;
}
/* ---- перменные объекта ---- */
this.x = x;.y = y;.z = z;.css = this.img.style;
}
/* ==== основная 3D анимация ==== */.prototype.anim = function () { (this.isLoaded) {
/* ---- от 3D к 2D проекции ---- */
var x = this.x - camera.x;y = this.y - camera.y;z = this.z - camera.z;(z < 20) z += 5000;p = camera.fov / z;w = this.w * p;h = this.h * p;
/* ---- рисуем HTML ---- */.css.left = Math.round(nw + x * p - w * .5) + 'px';.css.top = Math.round(nh + y * p - h * .5) + 'px';.css.width = Math.round(w) + 'px';.css.height = Math.round(h) + 'px';.css.zIndex = this.zi - Math.round(z);
} else {
/* ---- изображение загружено? ---- */.isLoaded = this.loading();
}
}
/* ==== инициализация при загрузке ==== */.prototype.loading = function () {((this.canvas && this.srcImg.complete) || this.img.complete) {(this.canvas) {
/* ---- версия с элементом canvas ---- */.w = this.srcImg.width;.h = this.srcImg.height;.img.width = this.w;.img.height = this.h;context = this.img.getContext("2d");.drawImage(this.srcImg, 0, 0, this.w, this.h);
} else {
/* ---- версия с обычным изображением ---- */
this.w = this.img.width;.h = this.img.height;
}
/* ---- кнопка загружена ---- */.but.className += " loaded";true;
}false;
}
////////////////////////////////////////////////////////////////////////////
/* ==== размеры экрана ==== */resize = function () {= scr.offsetWidth * .5; = scr.offsetHeight * .5;
}
/* ==== отключаем интерполяцию во время анимации ==== */
var interpolation = function (bicubic) {i = 0, o;( o = diapo[i++] ) {(o.but) {.css.msInterpolationMode = bicubic ? 'bicubic' : 'nearest-neighbor'; // makes IE8 happy.css.imageRendering = bicubic ? 'optimizeQuality' : 'optimizeSpeed'; // does not really work...
}
}
}
/* ==== скрипт инициализации ==== */init = function (data) {
/* ---- контейнеры ---- */= document.getElementById("screen");= document.getElementById("bar");= document.getElementById("urlInfo");();
/* ---- загрузка изобр