Двойное выпадающее меню, в первом выбирается, месяц, во втором - в зависимости от выбора в первом - день. И по нажатию кнопки осуществляется переход на нужную страничку.
Взгляните на код, а далее мы разберём его на части:
<html>
<head>
<style>
.spanstyle
{
position:absolute;
visibility:visible;
top:-50px;
font-size:8pt;
font-family:Verdana;
font-weight:bold;
color:#ff0000;
}
</style>
<script language="JavaScript">
<!--
var x,y
var step=10
var flag=0
var message="JavaPortal!!!"
message=message.split("")
var xpos=new Array()
var ypos=new Array()
for (i=0;i<=message.length;i++)
{
xpos[i]=-50
ypos[i]=-50
}
function handlerMM(e)
{
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
flag=1
}
function makesnake()
{
if (flag==1 && document.all)
{
for (i=message.length; i>=1; i--)
{
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y
for (i=0; i<message.length; i++)
{
var thisspan = eval("span"+(i)+".style")
thisspan.posLeft=xpos[i]
thisspan.posTop=ypos[i]
}
}
else if (flag==1 && document.layers)
{
for (i=message.length; i>=1; i--)
{
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y
for (i=0; i<message.length; i++)
{
var thisspan=eval("document.span"+i)
thisspan.left=xpos[i]
thisspan.top=ypos[i]
}
}
var timer=setTimeout("makesnake()",30)
}
for (i=0;i<=message.length;i++)
{
document.write("<span id='span"+i+"' class='spanstyle'>")
document.write(message[i])
document.write("</span>")
}
if (document.layers){document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove=handlerMM;
//-->
</script>
</head>
<body onLoad="makesnake()">
</body>
</html>
Первое что можно отметить, это содержимое между тегами <style> и </style>
.spanstyle
{
position:absolute;
visibility:visible;
top:-50px;
font-size:8pt;
font-family:Verdana;
font-weight:bold;
color:#ff0000;
}
</style>
Здесь мы указываем стиль структуры в которой будем выводить надпись.
position:absolute - позиционирование;
visibility:visible - видимость;
top:-50px - положение по высоте;
font-size:8pt - размер шрифта;
font-family:Verdana - сам шрифт;
font-weight:bold - начертание;
color:#ff0000 - цвет.
Сюда можно добавить и многое другое, зависит от вашей фантазии.
Далее начинается сам скрипт заключенный между тегами <script language="JavaScript"> и </script>.
<script language="JavaScript">
<!--
Объявляем переменные:
var x,y
var step=10
var flag=0
var message="JavaPortal!!!"
var xpos=new Array()
var ypos=new Array()
var x,y -переменные хранят координаты курсора мыши;
var step=10 - расстаяние между символами в надписи;
var flag=0 - флаг - используется далее в скрипте для определения произошло событие или нет;
var message="JavaPortal!!!" - надпись выводимая за курсором мыши;
var xpos=new Array() - массив содержащий x-координаты символов;
var ypos=new Array() - массив содержащий y-координаты символов.
Разбиваем надпись на массив символов:
message=message.split("")
Инициализируем все x и y координаты числом -50, для того чтобы изначально не было видно надписи:
for (i=0;i<=message.length;i++)
{
xpos[i]=-50
ypos[i]=-50
}
Объявляем функцию обрабатывающею события от мышки.
function handlerMM(e)
{
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
flag=1
}
Объявляем функцию реализующею весь алгоритм прорисовки символов.
function makesnake()
{
Здесь функция разделяется на два блока оператором if (в зависимости от структуры документа)
if (flag==1 && document.all)
{
Меняем все (кроме начальных) рядом стоящие x-координаты и сдвигаем их на шаг step, так же меняем рядом стоящие y-координаты местами.
for (i=message.length; i>=1; i--)
{
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
Начальную x-координату приравниваем x-координате курсора мышки со здвигом на шаг step, а начальную y-координату просто приравниваем y-координате курсора мышки.
xpos[0]=x+step
ypos[0]=y
Тут получаем каждую структуру в переменную thisspan и сдвигаем её в указанные координаты.
for (i=0; i<message.length; i++)
{
var thisspan = eval("span"+(i)+".style")
thisspan.posLeft=xpos[i]
thisspan.posTop=ypos[i]
}
}
В этом блоке всё то же самое за исключением метода получения структуры.
else if (flag==1 && document.layers)
{
for (i=message.length; i>=1; i--)
{
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y
for (i=0; i<message.length; i++)
{
var thisspan=eval("document.span"+i)
thisspan.left=xpos[i]
thisspan.top=ypos[i]
}
}
Повторяем функцию makesnake() каждые 30 мсек.
var timer=setTimeout("makesnake()",30)
}
Выводим символы.
for (i=0;i<=message.length;i++)
{
document.write("<span id='span"+i+"' class='spanstyle'>")
document.write(message[i])
document.write("</span>")
}
Устанавливаем обработчик машки.
if (document.layers){document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove=handlerMM;
//-->
</script>
</head>
При загрузке выполняем функцию makesnake().
<body onLoad="makesnake()">
</body>
</html>