esto es para quien le guste botones que tengan movimiento

jor_0203 · #1 (**permalink**) 22/11/2011, 04:19

como puedo parar una función que esta en movimiento, para que no se ponga sobre otra función
esta ejemplo funciona bien, pero cuando coloco el maus encima y lo quita rapido como diez veces, no sabe que hacer, si la funcion onMouseOver o onMouseOut
aquí les dejo el ejemplo funcionando
les va encantar, solo hay que mejorarlo ojala alguien me pueda ayudar
http://cursosdematematicas.com/boton123.php

Código PHP:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>contador</title>
<script type="text/javascript">
var cont2 = 0;
function cambio_color(){
 var unos = document.getElementById("uno");   //esto es para que vean los valores del contador pero lo pueden borrar
 unos.innerHTML = cont2;                      //esto es para que vean los valores del contador pero lo pueden borrar
   cont2+=10;
       
 if(cont2 <= 160){
   var cambiar = document.getElementById("div1").style.backgroundPosition="0"+"-"+cont2+"px";  
                  }else{
                         clearInterval(a);     //con esto detengo el movimiento y lo dejo en 160
                        cont2=160;
                        }  
                        }
function regresar_color(){
                          var unos = document.getElementById("uno");   //esto es para que vean los valores del contador pero lo pueden borrar
                          unos.innerHTML = cont2;                      //esto es para que vean los valores del contador pero lo pueden borrar
                          cont2-=10;
                                 if(cont2 >= 0){
                                                 var cambiar = document.getElementById("div1").style.backgroundPosition="0"+ "-" +cont2+"px";  
                                               }else{
                                                      clearInterval(b);          //con esto detengo el movimiento y lo dejo en 0
                                                      cont2=0;
                                                      }  
                      }
</script>
</head>
<body >
<div id="div1"
class="a" style="width:300px; background-image:url(boton_g.gif); height:150px; background-repeat: no-repeat;"
onMouseOver="a=setInterval('cambio_color()',100)" onMouseOut="b=setInterval('regresar_color()',100)" > </div>
<div id="uno"></div>
</body>
</html>

Franz1628 · #2 (**permalink**) 22/11/2011, 10:16

No es bueno utilizar variables globales pero ya arregle tu codigo.
prueba con este códgo y analizalo.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>contador</title>
<script type="text/javascript">
cont2=0;a='';b='';
function cambio_color1(){
    clearInterval(b);
    a = setInterval(cambio_color,100);
}
function regresar_color1(){
    clearInterval(a);
    b = setInterval(regresar_color,100);
}
function cambio_color(){
    var unos = document.getElementById("uno");   //esto es para que vean los valores del contador pero lo pueden borrar
    unos.innerHTML = cont2;                      //esto es para que vean los valores del contador pero lo pueden borrar
    cont2+=10;
    if(cont2 <= 160){
        var cambiar = document.getElementById("div1").style.backgroundPosition="0"+"-"+cont2+"px";  
    }else{
        clearInterval(a);     //con esto detengo el movimiento y lo dejo en 160
        cont2=160;
    }  
                        }
function regresar_color(){
    var unos = document.getElementById("uno");   //esto es para que vean los valores del contador pero lo pueden borrar
    unos.innerHTML = cont2;                      //esto es para que vean los valores del contador pero lo pueden borrar
    cont2-=10;
    if(cont2 >= 0){
        var cambiar = document.getElementById("div1").style.backgroundPosition="0"+ "-" +cont2+"px";  
    }else{
        clearInterval(b);          //con esto detengo el movimiento y lo dejo en 0
        cont2=0;
    }  
}
</script>
</head>
<body >
<div id="div1"
class="a" style="width:300px; background-image:url('boton_g.gif'); height:150px; background-repeat: no-repeat;"
onMouseOver="cambio_color1()" onMouseOut="regresar_color1()" > </div>
<div id="uno"></div>
</body>
</html>

Saludos

jor_0203 · #3 (**permalink**) 22/11/2011, 14:27

antes que nada mil gracias a la aportación de Franz1628
esto muchachos les puede servir para hacer menús con movimiento
realmente tuve una idea, pero me falta tener más capacidad al programar, ya que me dio algunos problemas y no los podía resolver
Franz1628 lo resolvió y nos puso el código para que lo podamos usar
Si algunos quieren mejorar o aportar mejoras para efectos están
bienvenidos todos sus aportes

jor_0203 · #4 (**permalink**) 23/11/2011, 01:40

antes que nada saludos a todos y a mi buen amigo Franz1628
mira lo que estoy haciendo con el código que me ayudaste a mejorar
aunque tiene unas fallas muy chicas es cuestión de mejorar
les pido ayuda a los web master ya que esta función esta muy padre y ya casi esta terminada
pueden checarla en este link solo tiene un error que es que se encuentran las funciones y no se como cancelas las funciones cuando este otra.
http://cursosdematematicas.com/boton4.php
vean como funcionas

Código Javascript:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>contador</title>
<script type="text/javascript">
cont2=0;a='';b='';
function cambio_color1(me){
                         clearInterval(b);
                         a = setInterval( function(){cambio_color(me) },100 ); 
                           }
function regresar_color1(me){
                           clearInterval(a);
                             b = setInterval( function(){regresar_color(me) },100 ); 
                            }
function cambio_color(me){
var unos = document.getElementById("uno");   //esto es para que vean los valores del contador pero lo pueden borrar
unos.innerHTML = cont2; 
 var  n=me;                     //esto es para que vean los valores del contador pero lo pueden borrar
                       cont2+=4;
                       if(cont2 <= 20){
                       var cambiar = document.getElementById(n).style.backgroundPosition="0"+"-"+cont2+"px";  
                                        }else{
                                              clearInterval(a);     //con esto detengo el movimiento y lo dejo en 160
                                              cont2=20;
                                             }  
                           }
function regresar_color(me){
var unos = document.getElementById("uno");   //esto es para que vean los valores del contador pero lo pueden borrar
unos.innerHTML = cont2;                      //esto es para que vean los valores del contador pero lo pueden borrar
        var  n1=me;   
                          cont2-=1;
                          if(cont2 >= 0){
                           var cambiar = document.getElementById(n1).style.backgroundPosition="0"+ "-" +cont2+"px";  
                                         }else{
                                               clearInterval(b);          //con esto detengo el movimiento y lo dejo en 0
                                               cont2=0;
                                              }  
                          }
</script>
    <style type="text/css">
<!--
body {
    background-color: #996633;
}
 
.menu {
    background-color: #FF33CC;
    position: relative;
    overflow:hidden;
}
.menu ul li{
    list-style-type: none;
    float: left;
    width: 100px;
    margin-right: 5px;
    height: 20px;
    text-align: center;
    color: #FF0000;
    background-image: url(jjjj.gif);
}
 
-->
    </style>
</head>
    <body >
    
    
    <div id="uno"></div>
    
    <div class="menu">
      <ul >
        <li id="me" onMouseOver="cambio_color1('me')" onMouseOut="regresar_color1('me')">home</li>
        <li  id="me2" onMouseOver="cambio_color1('me2')" onMouseOut="regresar_color1('me2')">ventas</li>
        <li  id="me3"onMouseOver="cambio_color1('me3')" onMouseOut="regresar_color1('me3')">dise&ntilde;o</li>
        <li  id="me4" onMouseOver="cambio_color1('me4')" onMouseOut="regresar_color1('me4')">artes</li>
        <li  id="me5" onMouseOver="cambio_color1('me5')" onMouseOut="regresar_color1('me5')">comedia</li>
       
      </ul>
    </div>
    
</body>
    </html>

IsaBelM · #5 (**permalink**) 23/11/2011, 08:39

Cita:

saludos isabel
estoy haciendo un menus con movimiento con puro javascript franz1628 me esta ayudando
espero que te sirva , te mando el link del ejemplo ya casi resuelto http://cursosdematematicas.com/boton4.php
tiene unas fallitas que no perfecciono, ojala me puedas dar tu valiosa opinión
http://www.forosdelweb.com/f13/esto-...miento-959474/
gracias

ya han sido en 9 ocasiones en las que me dejas menajes de visita pidiéndome que te ayude con distintos códigos. y ya han sido varias las ocasiones que tanto por mensaje de visita como por mp te he respondido que esa herramienta no ha de ser usada con esa finalidad.

espero que esta sea la última vez que ocurre. cuando me interese un tema participaré