Эта JavaScript создает область прокрутки, в которой область изображений, где изображения перемещаются горизонтально через область отображения. Поскольку каждое изображение исчезает через одну сторону области отображения, оно читается в начале серии изображений. Это создает непрерывную прокрутку изображений в выделенном цикле, если у вас достаточно изображений, чтобы заполнить ширину области отображения выделения.
Этот скрипт имеет несколько ограничений:
- Изображения отображаются в одинаковом размере (ширина и высота). Если изображения физически не имеют одинаковый размер, то все они будут изменены. Это может привести к плохому качеству изображения, поэтому лучше всего последовательно изменять размер исходных изображений.
- Высота изображений должна соответствовать высоте, установленной для выделения, в противном случае изображения будут изменены с таким же потенциалом для плохих изображений, упомянутых выше.
- Ширина изображения, умноженная на количество изображений, должна быть больше ширины выделенной области. Самый простой способ исправить это, если изображений недостаточно, - это просто повторить изображения в массиве, чтобы заполнить пробел.
- Единственное взаимодействие, которое предлагает этот сценарий, - это остановка прокрутки при наведении мыши на область выделения и возобновление при перемещении мыши с изображения. Позже мы опишем модификацию, которая может быть сделана для преобразования всех изображений в ссылки.
- Если у вас есть несколько областей на странице, все они работают с одинаковой скоростью, поэтому наведение курсора на любую из них заставит их перестать двигаться.
- Вам нужны ваши собственные изображения. Те, что в примерах, не являются частью этого сценария.
Image Marquee JavaScript Code
Во-первых, скопируйте следующий JavaScript и сохраните его как marquee.js.
Этот код содержит два массива изображений (для двух областей на странице примера), а также два новых объекта mq, содержащих информацию, отображаемую в этих двух областях.
Вы можете удалить один из этих объектов и изменить другой, чтобы отображать одну непрерывную область на своей странице, или повторить эти операторы, чтобы добавить еще больше областей.
Функция mqRotate должна вызываться с передачей mqr после определения границ, поскольку она будет обрабатывать повороты.
варmqAry1 = [ 'графика / img0.gif', 'графика / img1.gif', 'графика / img2.gif',»
графика / img3.gif ' 'графика / img4.gif', 'графика / img5.gif',' графика /
img6.gif», 'графика / img7.gif', 'графика / img8.gif', 'графика / img9.gif',
'Графика / img10.gif', 'графика / img11.gif', 'графика / img12.gif',»
графика / img13.gif», 'графика / img14.gif'];
вар
mqAry2 = [ 'графика / img5.gif', 'графика / img6.gif', 'графика / img7.gif',»
графика / img8.gif ' 'графика / img9.gif', 'графика / img10.gif',' графика /
img11.gif ' 'графика / img12.gif', 'графика / img13.gif',' графика / img14.
GIF ' 'графика / img0.gif', 'графика / img1.gif', 'графика / img2.gif','
графика / img3.gif», 'графика / img4.gif'];
function start () {
новый mq ('m1', mqAry1,60);
new mq ('m2', mqAry2,60); // повторить для необходимого количества полей
mqRotate (mqr); // должен прийти последним
}
window.onload = start;
// Непрерывное выделение изображения
// авторское право 24 июля 2008 года, Стивен Чепмен
// http://javascript.about.com
// разрешено использовать этот Javascript на вашей веб-странице
// при условии, что весь код ниже в этом скрипте (включая эти
// комментарии) используется без изменений
вар mqr = []; функция
mq (id, ary, wid) {this.mqo = document.getElementById (id); вар хейт =
this.mqo.style.height; this.mqo.onmouseout = функция ()
{mqRotate (mqr);}; this.mqo.onmouseover = функция ()
{clearTimeout (mqr [0] .TO);}; this.mqo.ary = []; var maxw = ary.length;
для (вар
I = 0; яthis.mqo.ary [I] = .src ичных [I]; this.mqo.ary [i] .style.position =
«Абсолютный»; this.mqo.ary [i] .style.left = (wid * i) + 'px';
this.mqo.ary [i] .style.width = wid + 'px'; this.mqo.ary [i] .style.height =
Хейт; this.mqo.appendChild (this.mqo.ary [i]);} mqr.push (this.mqo);}
function mqRotate (mqr) {if (! mqr) return; для (var j = mqr.length - 1; J
> -1; j--) {maxa = mqr [j] .ary.length; для (var i = 0; imqr [J] .ary [I] .style; x.left = (parseInt (x.left, 10) -1) + 'px';} var y =
mqr [J] .ary [0] .style; if (parseInt (y.left, 10) + parseInt (y.width, 10) <0)
{var z = mqr [j] .ary.shift (); z.style.left = (parseInt (z.style.left) +
parseInt (z.style.width) * maxa) + 'px'; mqr [j] .ary.push (z);}}
mqr [0] .TO = setTimeout ('mqRotate (mqr)', 10);}
Затем добавьте следующий код в раздел head вашей страницы:
Добавить команду таблицы стилей
Нам нужно добавить команду таблицы стилей, чтобы определить, как будет выглядеть каждый из наших маркеров.
Вот код, который мы использовали для примеров на странице примера:
.marquee {позиция: относительная;
переполнение: скрытое;
ширина: 500 пикселей;
высота: 60 пикселей;
рамка: сплошная черная 1px;
}
Вы можете изменить любое из этих свойств для своего выделения; тем не менее, он должен оставаться положение: родственник.
Вы можете поместить его в свою внешнюю таблицу стилей, если она у вас есть, или заключить ее между теги в заголовке вашей страницы.
Определите, где вы разместите шатер
Следующим шагом является определение div на вашей веб-странице, где вы разместите область изображений.
Первый из примеров маркизов использовал этот код:
Класс связывает это с кодом таблицы стилей, в то время как id - это то, что мы будем использовать в новом вызове mq (), чтобы прикрепить область изображений.
Убедитесь, что ваш код содержит правильные значения
Последнее, что нужно сделать, чтобы собрать все это вместе, - убедиться, что ваш код для добавления объекта mq в ваш JavaScript после загрузки страницы содержит правильные значения.
Вот как выглядит один из примеров операторов:
новый mq ('m1', mqAry1,60);
- M1 - это идентификатор нашего тега div, который будет отображать выделение.
- mqAry1 - это ссылка на массив изображений, которые будут отображаться в выделении.
- Окончательное значение 60 - это ширина наших изображений (изображения будут прокручиваться справа налево, поэтому высота будет такой же, как мы определили в таблице стилей).
Чтобы добавить дополнительные области, мы просто устанавливаем дополнительные массивы изображений, дополнительные элементы div в нашем HTML, возможно, настраиваемые дополнительные классы, чтобы по-разному стилизовать области и добавить столько новых операторов mq (), сколько у нас маркизы. Нам просто нужно убедиться, что вызов mqRotate () следует за ними, чтобы управлять для нас метками.
Создание изображений Marquee в ссылки
Есть только два изменения, которые необходимо внести, чтобы превратить изображения в выделении в ссылки.
Сначала измените ваш массив изображений с массива изображений на массив массивов, где каждый из внутренних массивов состоит из изображения в позиции 0 и адреса ссылки в позиции 1.
var mqAry1 = [
[ 'Графика / img0.gif', 'blcmarquee1.htm'],
[ 'Графика / img1.gif', 'blclockm1.htm'], ...
['graphics / img14.gif', 'bltypewriter.htm']];
Второе, что нужно сделать, это заменить следующую часть основной части скрипта:
// Непрерывное выделение изображения со ссылками
// авторское право 21 сентября 2008 года, Стивен Чепмен
// http://javascript.about.com
// разрешено использовать этот Javascript на вашей веб-странице
// при условии, что весь код ниже в этом скрипте (включая эти
// комментарии) используется без изменений
var mqr = []; function mq (id, ary, wid) {this.mqo = document.getElementById (id); var heit = this.mqo.style.height; this.mqo.onmouseout = function () {mqRotate (mqr);}; this.mqo.onmouseover = function () {clearTimeout (mqr [0] .TO);}; this.mqo.ary = []; var maxw = ary.length; для (var i = 0; i
Остальная часть того, что вам нужно сделать, остается такой же, как описано для версии выделенной области без ссылок.