Добрый день!
Решил написать статью о программировании на 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. Затем понадобится только лишь имя и пароль.
Теперь заходим и смотрим, чтоже они нам предлагают. С удовольствием отмечаем довольно широкий спектр новостей.
Выбираем интересное и устанавливаем количество новостей в каждой рубрике.
Ниже выбираем кодировку новостей. Она должна совпадать с кодировкой вашего сайта. Например - 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.html\">текст1</a><br>"; news+="<a href=\"http://www.gazeta.ru/2001/10/08/last32746.html\">текст2</a><br>"; document.write(news);
Нам надо:
Чтобы получить из всего этого:
<a href="http://www.gazeta.ru/2001/10/07/400dnejsborn.html" target=_blank onMouseOver=clearTimeout(timeOut) onMouseOut=init()>текст1</a><br><br> <a href="http://www.gazeta.ru/2001/10/08/last32746.html" 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, но можно делать это и раньше, что вам и советую.
Таким образом, оперируя с координатами слоев, можно выставить нужное его положение, размеры. А выставляя скорость, можно заставить посетителей читать новости с желаемой скоростью.
Вариант, когда новости выводятся на нашем сайте я опубликую в следующей статье.
Тотоев Александр
www.czar.ru
www.nova-wings.ru
www.russianjudo.ru
Корхова Ольга
(автор кода ява-скрипта движения слоя)
www.chtpz.ru