Полоса
новостей с использованием js и слоев
Автор: Тотоев Александр
Источник: http://prosto.pp.ru/
Решил написать
статью о программировании на php на примере экспорта новостей с сайта
http://www.gazeta.ru.
Но не в том виде, который они предлагают, а по-своему, компактно и интересно.
Такой пример
вы можете увидеть на страницах сайтов http://www.czar.ru
или же http://www.russianjudo.ru.
Если вместо
новостей пусто или сообщение об ошибке (зависит от настроек сервера),
это значит, что сервер gazeta.ru сильно занят и не может обслужить всех
желающих получить новости. Можно конечно брать новости и с других серверов,
но так как мы рассматриваем реально работающий пример программирования,
то будем работать с ним.
Как же создать
такую новостную полосу? Все довольно просто. Заходим на сайт и находим
пункт "экспорт новостей". http://www.gazeta.ru/explogin.html.
Там нам предлагают экспортировать на свой сайт новостную полосу с их ресурса.
Мы радуемся
и регистрируемся. Все абсолютно бесплатно и, главное, стабильно. Например
(реальная регистрация, можете зайти и проверить, а также, можете там изменять
рубрики, получаемые нами в новостной полосе), ввели имя news_list, пароль
qwer мейл - ваш (реально, в этом примере - мой), адрес сайта любой, например
- citforum.ru. Затем понадобится только лишь имя и пароль.
Теперь заходим
и смотрим, чтоже они нам предлагают. С удовольствием отмечаем довольно
широкий спектр новостей.
- Первая
полоса
- Полоса
политики
- Полоса
бизнеса
- Полоса
культуры
- Полоса
спорта
- Автомобильные
новости
- Бизнес
новости
- Спортивные
новости
- Новостная
лента
- Полоса
International
- News in
English
- Полоса
общества
- Полоса
финансов
- Полоса
автомобилей
- Новость
часа
- Молния
Выбираем
интересное и устанавливаем количество новостей в каждой рубрике.
Ниже выбираем
кодировку новостей. Она должна совпадать с кодировкой вашего сайта. Например
- win1251.
Затем выбираем
вид новостей (с датой, с временем и без них). Проще выбрать пустую новость.
Хотя программа будет работать в любом случае.
Верх и низ
новостей оформлять не нужно.
Получаем
строку, которую надо запомнить: <script language="javascript"
src="http://www.gazeta.ru/cgi-bin/export/export.cgi?id=2743"></script>
Из нее извлекаем
полезное: Адрес cgi-скрипта, который и формирует наши новости на gazeta.ru.
Этот адрес: http://www.gazeta.ru/cgi-bin/export/export.cgi?id=2743
Таким образом,
мы имеем страницу, с которой нам надо изъять код ссылок на новости gazeta.ru
к себе. Она имеет приблизительно такой вид:
var news="";
news+="<a href=\"http://www.gazeta.ru/2001/10/07/400dnejsborn.shtml\">текст1</a><br>";
news+="<a href=\"http://www.gazeta.ru/2001/10/08/last32746.shtml\">текст2</a><br>";
document.write(news);
Нам надо:
- найти
строки со ссылками
- убрать
в них \ и лишние ";
- добавить
еще один <br>
- добавить
открытие ссылки в новом окне и вызов функции javascript (target=_blank
onMouseOver=clearTimeout(timeOut) onMouseOut=init())
Чтобы получить
из всего этого:
<a href="http://www.gazeta.ru/2001/10/07/400dnejsborn.shtml"
target=_blank onMouseOver=clearTimeout(timeOut) onMouseOut=init()>текст1</a><br><br>
<a href="http://www.gazeta.ru/2001/10/08/last32746.shtml"
target=_blank onMouseOver=clearTimeout(timeOut)
onMouseOut=init()>текст2</a><br><br>
Задачи поставлены.
Код программы
создания блока новостей.
Вот код программы
с комментариями и пояснениями, которая создает массив новостей.
<? //
начинаем работать
$adr='http://www.gazeta.ru/cgi-bin/export/export.cgi?id=1372'; //адрес
пациента
$begin='<a href'; // слово, по которому будем искать начало ссылки
$end='<br>"'.chr(59); //слово конца ссылки
$end_new='<br><br>'; //новый конец новости (в своем варианте
мы сделаем
//больше разрыв между новостями, чтобы они читались раздельно)
$noscript='">'; // конец ссылки a href без скрипта и таргета
$script='" target="_blank" onMouseOver=clearTimeout(timeOut)
onMouseOut=init()>';
// конец ссылки с таргетом и вызовом ява-скрипта
$screen=file($adr); // читаем страницу новостей - оригинал
$j=0; // количество новостей
for ($i=0; $i<sizeof($screen); $i++) { // отслеживаем строки страницы
if (strpos($screen[$i],$begin,0)==false) {
// есть ли ссылка на новость в строке?
// определяем по наличию в строке слова начала ссылки $begin
// если нет новости в строке
}
else { // если все-же есть новость в строке.
$screen[$i]=stripslashes(screen[$i]);
// заменяем \" на "
$str=explode($begin,$screen[$i]);
// разбиваем строку на массив подстрок
// разбитие производим словом начала ссылки.
// Первым элементом массива получим ссылку + то, что после нее.
$str[1]=$begin.$str[1];
// Возвращаем ссылке ее начало (слово, которым разбивали строку)
$scr[$j]=str_replace($end,$end_new,$str[1]);
// заменяем конец строки новости
$scr[$j]=str_replace($noscript,$script,$scr[$j]);
// добавляем в ссылку таргет и вызов ява-скрипта
echo $scr[$j];
// выводим ссылку на экран.
$j++; // плюсуем единичку к счетчику новостей
}
}
?> // конец программы создания массива новостей.
Итак, имеем
код программы, которая создает слой, который двигается снизу вверх посредством
ява-скрипта.
Ява-скрипт
представляет собой программу, протаскивающую блок с новостями в слое с
выбираемыми вами размерами и положением. Программа работает и в IE4+ и
в NN.
Теперь о
ява-скрипте и встраивании в страницу.
<html>
<head>
<link rel=stylesheet href=scroll.css>
<script language=javascript>
<!--
startFrom=70;
//Начальное положение блока новостей (по вертикали) - нижняя отметка
currentY=startFrom; //Текущее положение блока новостей (по вертикали)
wait=300; //Задержка движения блока, миллисекунды
timeOut=null; //Временная переменная
//Перемещение блока
function moveUp()
{
currentY-=3; //Уменьшаем счетчик
if(currentY<minY)currentY=startFrom;
//Если дошли до минимальной отметки - нужно сдвинуть слой обратно
eval(objScroll+stylePrefix+'.top='+currentY);
//А теперь сдвигаем слой туда, куда указывает счетчик
timeOut=setTimeout("moveUp()",wait);
//И через wait секунд снова вызываем moveUp()
}
//Инициализация
function init(){
//Определяем тип браузера
var ie=(navigator.appName=="Microsoft Internet Explorer")?1:0;
var nn=(navigator.appName=="Netscape")?1:0;
//В зависимости от типа браузера, определяем переменные:
//objScroll - слой, который нужно двигать
//stylePrefix - имя свойства, ссылающегося на стили объекта
//minY - минимальная отметка, до которой можно сдвигать слой
if(ie){ objScroll='document.all.dScroll';
stylePrefix='.style';
minY=-eval(objScroll+'.offsetHeight');
}
if(nn){
objScroll='document.layers.dBox.document.layers.dWindow.document.layers.dScroll';
stylePrefix='';
minY=-eval(objScroll+'.clip.height');
}
moveUp(); //начинаем сдвигать слой
}//-->
</script>
</head>
<body>
<table width="240" height="60" align="center"
border=0 cellpadding=0 cellspacing=0>
<tr>
<td valign=top width=240 height=60 bgcolor=#ffffff>
<div id=dBox><div id=dWindow><div id=dScroll>
<!-- Здесь собственно должен быть текст блока.... -->
<!-- И внизу строка, которая и вставляет блок. -->
<!-- Вышеописанная программа на php должна находиться в этом файле
news.php -->
<!--#include virtual="news.php" -->
</div></div></div>
</td></tr></table>
<script language="Javascript">init()</script>
</body>
</html>
Как видим,
мы пользуемся слоями. Есть слои, на которых размещен слой с текстом новостей.
Последний слой мы прокручиваем снизу вверх. Выставляем скорость движения
задержкой движения wait. При поднесении мышки к ссылке, движение прекращается
до того, пока мышка не сойдет со ссылки.
А вот как
надо описать слои в файле scroll.css, на который стоит ссылка <link
rel=stylesheet href=scroll.css>
#dBox{
position:relative;
//Считаем лефт и топ от левого верхнего угла объекта,
//внутри которого находится слой
z-index:240; //Побольше, чтоб не перекрыло другими элементами страницы
top:0;left:0; //Отступы сверху и слева
width:240px;height:60px; //Ширина и высота
}
#dWindow{
position:absolute;
//Поскольку слой в слое, то считается от верхнего левого угла dBox
z-index:240; //Такой же, как у dBox
top:0;left:0; //Отступы сверху и слева
clip:rect(0,240,60,0);
//Определяем слой как прямоугольник шириной 240 и высотой 60
}
#dScroll{
position:absolute; //То же, что и с dWindow
z-index:238; //"Прячем" слой за dBox'ом
top:60;left:2; //Сразу сдвигаем на нужное расстояние вниз
width:238px;height:60px; //Ширина и высота
visibility:visible; //Видимый слой
text-align:left; //Текст выровнен по левому краю слоя
font-family:arial,helvetica,sans-serif; font-size:11px; color:#000000;
//Стили для текста
}
Прошу не
забыть и удалить комментарии в тексте описания слоев. Иначе работать не
будет.
А лучше,
приведу текст без комментариев (именно его копируйте и редактируйте):
#dBox{position:relative;
z-index:240; top:0;left:0; width:240px;height:60px;}
#dWindow{position:absolute; z-index:240; top:0;left:0; clip:rect(0,240,60,0);}
#dScroll{position:absolute; z-index:238; top:60;left:2; width:238px;height:60px;
visibility:visible; text-align:left; font-family:arial,helvetica,sans-serif;
font-size:11px; color:#000000;}
Чуть ниже
в коде страницы вставляем запуск ява-скрипта, который прокручивает наши
новости по слою снизу вверх:
<script
language="Javascript">init()</script>
Обычно этот
вызов ставят в конце страницы или даже по событию onload, но можно делать
это и раньше, что вам и советую.
Таким образом,
оперируя с координатами слоев, можно выставить нужное его положение, размеры.
А выставляя скорость, можно заставить посетителей читать новости с желаемой
скоростью.
|