Электронная библиотека
Программисту веб-дизайнеру
Другие материалы
Библиотека: скачать готовые скрипты Javascript
Изображение Пегаса летает по экрану, подключение анимированного файла
Посмотрите на работу этого чудесного скрипта на отдельной веб-странице (персональный компьютер).
При помощи приводимого ниже клиентского сценария - скрипта Javascript - изображение Пегаса, бабочки, жука и другое летает по экрану и взмахивает крыльями. Можно использовать любые Ваши картинки бабочек и насекомых с поднятыми в полете крыльями, достаточно одной картинки. Для того, чтобы Пегас, бабочка или жук махали крыльями в полете, нужно использовать анимированный GIF.
Выделите мышью приводимый ниже код, скопируйте его (командой Ctrl+C) и вставьте его (командой Ctrl+V) в свою веб-страницу после тэга <body> перед тэгом </body>.
<script language="javascript 1.2">
<!--
if (navigator.userAgent.indexOf("MSIE 4.0; Mac") == -1 ) {
init();
document.writeln('<div id="moving">');
document.writeln('<a href="http://www.mat.net.ua/"><img src="babochka.gif" width=135 height=135 border=0"></a>'); //путь к рисунку
document.writeln('</div>');
animieren();
}
// -->
</script>
Выделите мышью приводимый ниже код, скопируйте его (командой Ctrl+C) и вставьте его (командой Ctrl+V) в свою веб-страницу после тэга <head> перед тэгом </head> <body>.
<STYLE>#normal {
Z-INDEX: 10000; LEFT: 10px; VISIBILITY: visible; POSITION: absolute; TOP: 10px
}
#moving {
Z-INDEX: 10030; LEFT: 260px; VISIBILITY: visible; WIDTH: 50px; POSITION: absolute; TOP: 180px
}
</STYLE>
<script language="javascript 1.2">
<!--
var layerRef="null",layerStyleRef="null",styleSwitch="null";
// globale variablen fuers animieren
var dx = 1;
var dy = 1;
var maxgeschw = 99;
if (window.innerWidth) {
var x = (window.innerWidth / 2) - 23;
var y = (window.innerHeight / 2) - 15;
var maxx = window.innerWidth - 46;
var maxy= window.innerHeight - 30;
}
else {
var x = (640 / 2) - 23;
var y = (400 / 2) - 15;
var maxx = 640 - 46;
var maxy= 400 - 30;
}
function init(){
if (navigator.appName == "Netscape") {
layerStyleRef="layer.";
layerRef="document.layers";
styleSwitch="";
} else {
layerStyleRef="layer.style.";
layerRef="document.all";
styleSwitch=".style";
}
}
function moveLayerTo(layerName,left,top){
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.top=top');
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.left=left');
}
function animieren(){
moveLayerTo('moving',x,y);
if (Math.random() < .2) {
if (Math.random() < .5) {
if (Math.random() < .5) {
dx= Math.max(-maxgeschw,dx - 1);
} else {
dx= Math.min( maxgeschw,dx + 1);
}
} else {
if (Math.random() < .5) {
dy= Math.max(-maxgeschw,dy-1);
} else {
dy= Math.min( maxgeschw,dy+1);
}
}
}
x += dx;
y += dy;
x = Math.max(Math.min(maxx,x),0);
y = Math.max(Math.min(maxy,y),0);
if (x==0) {dx = 1}
if (y==0) {dy = 1}
if (x==maxx) {dx=-1}
if (y==maxy) {dy=-1}
setTimeout('animieren()',70);
}
// -->
</script>