martes, 16 de abril de 2024

Abeja volando en la pantalla


Este es un script creado por Juan Rodríguez que nos pondrá a jugar un poco, pues hará que una abeja vuele por la pantalla del blog y no se detendrá hasta que consigas hacer click sobre ella.
Puedes ver un ejemplo en este blog de pruebas.

Para ponerlo en tu blog sólo necsitas realizar dos sencillos pasos, entra en Diseño | Añadir gadget | HTML/Javascript y ahí pega este código:
<h3 align='center'>Controles de la abeja</h3>
<div id='abeja' style='position:absolute; top:0px; left:0px; visibility:hidden; z-index:10'>
<a href='javascript:void(0)' onclick='abejacazada()'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0il5eXKMyWJgz9Ho3dbXYoyRqlahLT8gZkkl9OS68OGXX8l49gnIUYtAZg5BQun1b1VVQKoMLIPvLRTkYYlLoMIfe7xM5WAQf6WO4lD7JqS6WnnthKQEgtH7kaA9hou6FTIYiZvK106w/s1600/Abeja.gif" style="width:52px; height:51px; border:0;" /></a></div>

<center>
<input name="detener" type="button"
onclick="abejacazada()" value="Detener" />
<input name="volar" type="button"
onclick="iniciar()" value="Volar" />
</center>

<script type='text/javascript'>
// Juan Rodríguez [Consultor]
<!-- inicio
var velocidad=100;
var cambio=200;
var CamHorMax=25;
var CamVerMax=25;
var hor, ver;
var DesHor=2;
var DesVer=2;
var DirHor=true;
var DirVer=true;

function iniciar() {
ajustar();
volar(hor/2,ver/2);
document.getElementById('abeja').style.visibility="visible";
animar();
cambiar();
reiniciar(); }

function ajustar() {
if (document.all) {
hor=document.body.clientWidth;
ver=document.body.clientHeight }
else if (document.getElementById && !document.all) {
hor=window.innerWidth;
ver=window.innerHeight } }

function volar(PosHor, PosVer) {
document.getElementById('abeja').style.top=parseInt(document.getElementById('abeja').style.top)+PosVer + "px";
document.getElementById('abeja').style.left=parseInt(document.getElementById('abeja').style.left)+PosHor + "px"; }

function animar() {
PosHor=parseInt(document.getElementById('abeja').style.left);
PosVer=parseInt(document.getElementById('abeja').style.top);

if (DirVer) {
if ( (PosVer) > (ver-75) ) {DirVer=false; volar(0,-DesVer); } else {volar(0,DesVer); } }
else
{ if ( (PosVer) < 75) {DirVer=true; volar(0,DesVer); } else {volar(0,-DesVer);} }

if (DirHor) {
if ( (PosHor) > (hor-75) ) {DirHor=false; volar(-DesHor,0); } else {volar(DesHor,0); } }
else
{ if ( (PosHor) < 75) {DirHor=true; volar(DesHor,0); } else {volar(-DesHor,0); } }
setTimeout('animar()',velocidad); }

function cambiar() {
DirHor=(Math.floor(Math.random()*2)==0);
DirVer=(Math.floor(Math.random()*2)==0);
DesHor=Math.floor(Math.random()*CamHorMax);
DesVer=Math.floor(Math.random()*CamVerMax);
setTimeout('cambiar()',cambio); }

function abejacazada() { document.getElementById('abeja').style.visibility="hidden" }

function reiniciar() {setTimeout("window.onresize=releer",400) }

function releer() { window.location.reload() }

window.onresize = ajustar
window.onload = iniciar;
// final -->
</script>


Fuente: https://www.ciudadblogger.com/2010/04/abeja-volando-en-la-pantalla.html 

No hay comentarios:

Publicar un comentario