ѕолоса новостей с использованием js и слоев

ѕодробна€ информаци€ аренда vps сервера у нас.

ѕолоса новостей с использованием js и слоев. 2002-07-04
јвтор: “отоев јлександр —траницы: [1]

–ешил написать статью о программировании на php на примере экспорта новостей с сайта https://www.gazeta.ru. Ќо не в том виде, который они предлагают, а по-своему, компактно и интересно.

“акой пример вы можете увидеть на страницах сайтов https://www.czar.ru или же https://www.russianjudo.ru.

≈сли вместо новостей пусто или сообщение об ошибке (зависит от настроек сервера), это значит, что сервер gazeta.ru сильно зан€т и не может обслужить всех желающих получить новости. ћожно конечно брать новости и с других серверов, но так как мы рассматриваем реально работающий пример программировани€, то будем работать с ним.

 ак же создать такую новостную полосу? ¬се довольно просто. «аходим на сайт и находим пункт "экспорт новостей". https://www.gazeta.ru/explogin.html. “ам нам предлагают экспортировать на свой сайт новостную полосу с их ресурса.

ћы радуемс€ и регистрируемс€. ¬се абсолютно бесплатно и, главное, стабильно. Ќапример (реальна€ регистраци€, можете зайти и проверить, а также, можете там измен€ть рубрики, получаемые нами в новостной полосе), ввели им€ news_list, пароль qwer мейл - ваш (реально, в этом примере - мой), адрес сайта любой, например - citforum.ru. «атем понадобитс€ только лишь им€ и пароль.

“еперь заходим и смотрим, чтоже они нам предлагают. — удовольствием отмечаем довольно широкий спектр новостей.

ѕерва€ полоса
ѕолоса политики
ѕолоса бизнеса
ѕолоса культуры
ѕолоса спорта
јвтомобильные новости
Ѕизнес новости
—портивные новости
Ќовостна€ лента
ѕолоса International
News in English
ѕолоса общества
ѕолоса финансов
ѕолоса автомобилей
Ќовость часа
ћолни€
¬ыбираем интересное и устанавливаем количество новостей в каждой рубрике.

Ќиже выбираем кодировку новостей. ќна должна совпадать с кодировкой вашего сайта. Ќапример - win1251.

«атем выбираем вид новостей (с датой, с временем и без них). ѕроще выбрать пустую новость. ’от€ программа будет работать в любом случае.

¬ерх и низ новостей оформл€ть не нужно.

ѕолучаем строку, которую надо запомнить: <script language="javascript" src="https://www.gazeta.ru/cgi-bin/export/export.cgi?id=2743"></script>

»з нее извлекаем полезное: јдрес cgi-скрипта, который и формирует наши новости на gazeta.ru. Ётот адрес: https://www.gazeta.ru/cgi-bin/export/export.cgi?id=2743

“аким образом, мы имеем страницу, с которой нам надо изъ€ть код ссылок на новости gazeta.ru к себе. ќна имеет приблизительно такой вид:

var news="";
news+="<a href=\"https://www.gazeta.ru/2001/10/07/400dnejsborn.shtml\">текст1</a><br>";
news+="<a href=\"https://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="https://www.gazeta.ru/2001/10/07/400dnejsborn.shtml"
target=_blank onMouseOver=clearTimeout(timeOut) onMouseOut=init()>текст1</a><br><br>
<a href="https://www.gazeta.ru/2001/10/08/last32746.shtml"
target=_blank onMouseOver=clearTimeout(timeOut)
onMouseOut=init()>текст2</a><br><br>

«адачи поставлены.

 од программы создани€ блока новостей.

¬от код программы с комментари€ми и по€снени€ми, котора€ создает массив новостей.

<? // начинаем работать
$adr='https://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, но можно делать это и раньше, что вам и советую.

“аким образом, опериру€ с координатами слоев, можно выставить нужное его положение, размеры. ј выставл€€ скорость, можно заставить посетителей читать новости с желаемой скоростью.



јвтор: “отоев јлександр

https://allflow.ru доставка цветов краснодар букеты цветы розы.


ѕри перепечатке информации делайте, пожалуйста, ссылку на наш сайт (либо поделитьс€ вконтакте, гугл+ или делитесь в одноклассниках статьЄй). —пасибо!

»сточник: www.wr-script.ru©, 2004-2023г.

ƒелитесь с друзь€ми в соцсет€х. јктивные комментаторы получают свежие скрипты и бесплатные доработки от WR-Script.ru!

¬ернутьс€ к стать€м помощи WEB-мастеру

WR-–°—З—С—В—З–Є–Ї