Ïîëîñà íîâîñòåé ñ èñïîëüçîâàíèåì 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, íî ìîæíî äåëàòü ýòî è ðàíüøå, ÷òî âàì è ñîâåòóþ.

Òàêèì îáðàçîì, îïåðèðóÿ ñ êîîðäèíàòàìè ñëîåâ, ìîæíî âûñòàâèòü íóæíîå åãî ïîëîæåíèå, ðàçìåðû. À âûñòàâëÿÿ ñêîðîñòü, ìîæíî çàñòàâèòü ïîñåòèòåëåé ÷èòàòü íîâîñòè ñ æåëàåìîé ñêîðîñòüþ.



Àâòîð: Òîòîåâ Àëåêñàíäð




Ïðè ïåðåïå÷àòêå èíôîðìàöèè äåëàéòå, ïîæàëóéñòà, ññûëêó íà íàø ñàéò (ëèáî ïîäåëèòüñÿ âêîíòàêòå, ãóãë+ èëè äåëèòåñü â îäíîêëàññíèêàõ ñòàòü¸é). Ñïàñèáî!

Èñòî÷íèê: www.wr-script.ru©, 2004-2026ã.

Äåëèòåñü ñ äðóçüÿìè â ñîöñåòÿõ. Àêòèâíûå êîììåíòàòîðû ïîëó÷àþò ñâåæèå ñêðèïòû è áåñïëàòíûå äîðàáîòêè îò WR-Script.ru!

Âåðíóòüñÿ ê ñòàòüÿì ïîìîùè WEB-ìàñòåðó

WR-Счётчик