Полоса новостей на php с использованием javascript и слоев.
Добрый день!
Решил написать статью о программировании на php на примере экспорта новостей с
сайта //www.gazeta.ru. Но не в том виде, который они предлагают,
а по-своему, компактно и интересно.
Такой пример вы можете увидеть на страницах сайтов //www.czar.ru
или же //www.russianjudo.ru.
Если вместо новостей пусто или сообщение об ошибке (зависит от настроек сервера),
это значит, что сервер gazeta.ru сильно занят и не может обслужить всех желающих
получить новости. Можно конечно брать новости и с других серверов, но так как мы
рассматриваем реально работающий пример программирования, то будем работать с ним.
Как же создать такую новостную полосу? Все довольно просто.
Заходим на сайт и находим пункт "экспорт новостей".
//www.gazeta.ru/explogin.html
Там нам предлагают экспортировать на свой сайт новостную полосу с их ресурса.
Мы радуемся и регистрируемся. Все абсолютно бесплатно и, главное, стабильно.
Например (реальная регистрация, можете зайти и проверить, а также, можете там
изменять рубрики, получаемые нами в новостной полосе), ввели имя news_list,
пароль qwer мейл - ваш (реально, в этом примере - мой), адрес сайта любой,
например - citforum.ru.
Затем понадобится только лишь имя и пароль.
Теперь заходим и смотрим, чтоже они нам предлагают.
С удовольствием отмечаем довольно широкий спектр новостей.
- Первая полоса
- Полоса политики
- Полоса бизнеса
- Полоса культуры
- Полоса спорта
- Автомобильные новости
- Бизнес новости
- Спортивные новости
- Новостная лента
- Полоса International
- News in English
- Полоса общества
- Полоса финансов
- Полоса автомобилей
- Новость часа
- Молния
Выбираем интересное и устанавливаем количество новостей в каждой рубрике.
Ниже выбираем кодировку новостей. Она должна совпадать с кодировкой вашего
сайта. Например - win1251.
Затем выбираем вид новостей (с датой, с временем и без них).
Проще выбрать пустую новость. Хотя программа будет работать в любом случае.
Верх и низ новостей оформлять не нужно.
Получаем строку, которую надо запомнить: <script language="javascript"
src="//www.gazeta.ru/cgi-bin/export/export.cgi?id=2743"></script>
Из нее извлекаем полезное:
Адрес cgi-скрипта, который и формирует наши новости на gazeta.ru.
Этот адрес:
//www.gazeta.ru/cgi-bin/export/export.cgi?id=2743
Таким образом, мы имеем страницу, с которой нам надо изъять код ссылок на новости
gazeta.ru к себе.
Она имеет приблизительно такой вид:
var news="";
news+="<a =\"//www.gazeta.ru/2001/10/07/400dnejsborn.shtml\">текст1</a><br>";
news+="<a =\"//www.gazeta.ru/2001/10/08/last32746.shtml\">текст2</a><br>";
document.write(news);
Нам надо:
- найти строки со ссылками
- убрать в них \ и лишние ";
- добавить еще один <br>
- добавить открытие ссылки в новом окне и вызов функции javascript
(target=_blank onMouseOver=clearTimeout(timeOut) onMouseOut=init())
Чтобы получить из всего этого:
<a ="//www.gazeta.ru/2001/10/07/400dnejsborn.shtml" target=_blank
onMouseOver=clearTimeout(timeOut) onMouseOut=init()>текст1</a><br><br>
<a ="//www.gazeta.ru/2001/10/08/last32746.shtml" target=_blank
onMouseOver=clearTimeout(timeOut) onMouseOut=init()>текст2</a><br><br>
Задачи поставлены.
Код программы создания блока новостей.
Вот код программы с комментариями и пояснениями, которая создает массив новостей.
<? // начинаем работать
$adr='//www.gazeta.ru/cgi-bin/export/export.cgi?id=1372'; //адрес пациента
$begin='<a '; // слово, по которому будем искать начало ссылки
$end='<br>"'.chr(59); //слово конца ссылки
$end_new='<br><br>'; //новый конец новости (в своем варианте мы сделаем
//больше разрыв между новостями, чтобы они читались раздельно)
$noscript='">'; // конец ссылки a без скрипта и таргета
$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 =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 =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
|