Нагоре – Надолу, Наляво – Надясно

Автор: Foxy

В този урок ще Ви покажа как да си направите Изображение, което можете да мърдате нагоре и надолу, а също и текст.
Най-напред ще създадем файл с име script.js . Кода не е сложен:

//Правим променлива за таймера
var timer;
//Правим функция която ще движи стойността на div елемента нагоре
function nagore()
{
//div се присвоява
var obj = document.getElementById("text");
/*Този ред определя с колко пиксела да движи елемента. Сега е наместено с един пиксел да се движи, по желание можете да го промените.*/
obj.style.top = (parseInt(obj.style.top)-1)+"px";
//интервал за извикване на функцията
timer = window.setTimeout("nagore()", 50);
}
//Правим функция която ще движи стойността на div елемента надолу
function nadolu()
{
//Смятам тук да не коментирам - ако сте чели внимателно горе кода ще се ориентирате
var obj = document.getElementById("text");
obj.style.top = (parseInt(obj.style.top)+1)+"px";
timer = window.setTimeout("nadolu()", 50);
}
//Тази функция ще отмени таймера при отместване на мишката
function stop()
{
clearTimeout(timer);
}

nagore-nadolu.html

<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=windows-1251">
<title>Foxy's Nagore - Nadolu djadja</title>
</head>
<body>
<p>
<a href="javasript://" onmouseover="nagore()" onmouseout="stop()">Нагоре</a>
<a href="javasript://" onmouseover="nadolu()" onmouseout="stop()">Надолу</a>
</p>
<div id="text" style="position:absolute; top:100px; left:270px; z-index:10">
Автор на урока съм аз (Foxy) и забранявам преписването му в други сайтове :)</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

Нямаше нищо сложно в първия скрипт нали?
Сега второто – то е същото само дето ще се мръдне картинка:
scriptskartinka.js

//Правим променлива за таймера
var timer;
//Правим функция която ще движи стойността на div елемента нагоре
function nagore()
{
//div се присвоява
var obj = document.getElementById("kartinka");
/*Този ред определя с колко пиксела да движи елемента. Сега е наместено с един пиксел да се движи, по желание можете да го промените.*/
obj.style.top = (parseInt(obj.style.top)-1)+"px";
//интервал за извикване на функцията
timer = window.setTimeout("nagore()", 50);
}
//Правим функция която ще движи стойността на div елемента надолу
function nadolu()
{
//Смятам тук да не коментирам - ако сте чели внимателно горе кода ще се ориентирате
var obj = document.getElementById("kartinka");
obj.style.top = (parseInt(obj.style.top)+1)+"px";
timer = window.setTimeout("nadolu()", 50);
}
//Тази функция ще отмени таймера при отместване на мишката
function stop()
{
clearTimeout(timer);
}

nagorenadolu2.html

<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=windows-1251">
<title>Foxy's Nagore - Nadolu djadja</title>
</head>
<body>
<p>
<a href="javasript://" onmouseover="nagore()" onmouseout="stop()">Нагоре</a>
<a href="javasript://" onmouseover="nadolu()" onmouseout="stop()">Надолу</a>
</p>
<div id="картинка" style="position:absolute; top:100px; left:270px; z-index:10">
<img src="http://web-tourist.net/new/images/fona.jpg" alt=""/></div>
<script type="text/javascript" src="scriptskartinka.js"></script>
</body>
</html>

Сега ще Ви покажа как да направите скрипт който движи наляво надясно.
nalqvonadqsno.js

//Правим променлива за таймера
var timer;
//Правим функция която ще движи стойността на div елемента нагоре
function nalqvo()
{
//div се присвоява
var obj = document.getElementById("kartinka");
/*Този ред определя с колко пиксела да движи елемента. Сега е наместено с един пиксел да се движи, по желание можете да го промените.*/
obj.style.left = (parseInt(obj.style.left)-1)+"px";
//интервал за извикване на функцията
timer = window.setTimeout("nalqvo()", 50);
}
//Правим функция която ще движи стойността на div елемента надолу
function nadqsno()
{
//Смятам тук да не коментирам - ако сте чели внимателно горе кода ще се ориентирате
var obj = document.getElementById("kartinka");
obj.style.left = (parseInt(obj.style.left)+1)+"px";
timer = window.setTimeout("nadqsno()", 50);
}
//Тази функция ще отмени таймера при отместване на мишката
function stop()
{
clearTimeout(timer);
}

В .js файла променяме само

obj.style.left = (parseInt(obj.style.left)-1)+"px";
obj.style.left = (parseInt(obj.style.left)+1)+"px";

само променяме top с left
nalqvonadqsno.html

<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=windows-1251">
<title>Foxy's Nagore - Nadolu - Nalqvo - Nadqsno djadja</title>
</head>
<body>
<p>
<a href="javasript://" onmouseover="nalqvo()" onmouseout="stop()">Наляво</a>
<a href="javasript://" onmouseover="nadqsno()" onmouseout="stop()">Надясно</a>
</p>
<div id="kartinka" style="position:absolute; top:100px; left:270px; z-index:10">
<img src="http://web-tourist.net/new/images/fona.jpg" alt=""/></div>
<script type="text/javascript" src="nalqvonadqsno.js"></script>
</body>
</html>

за текст наляво – надясно няма да дам, защото ако сте чели внимателно урока ще се справите и сами 🙂
Автор на урокът съм аз и забранявам преписването му в други сайтове.