i图像原型功能有问题吗?

问题描述 投票:0回答:1

我正在做课堂练习,向Image.prototype添加了一个功能>

应使用鼠标将图像放大两次,并在移开鼠标时将其撤消

但是我无法使它正常工作,我不知道为什么。我使用普通的Javascript类尝试了此代码,并且可以正常工作,但是我需要使用Image.prototype作为类,所以...

Image.prototype.doblar=function(estado){

  //Declaración de variables
  var intVelocidad;
  var tmpTemporizador;
  var imgImagen;

  //tamaño inicial de la imagen
    var intAnchoInicialImagen, intAltoInicialImagen;
    var intAnchoFinalImagen, intAltoFinalImagen;
    var intAnchoActualImagen, intAltoActualImagen;

  //variables para el incremento en ancho y alto
    var intIncrementoAlto, intIncrementoAncho;


  //Propiedades publicas

  Object.defineProperty(this, "doblarVelocidad",{

        get: function(){
            return intVelocidad;
        },

        set: function(valor){
            //Filtrado de argumento doblarVelocidad
            if(! /^([1-9]|[1-8][0-9]|9[0-9]|[1-4][0-9]{2}|500)$/.test(valor))
                throw new Error("Argumento doblarVelocidad inválido. Debe ser un número entre 1 y 500");

            intVelocidad = parseInt(valor);
        }
    });



  //Métodos públicos

  this.on = function(){
        imgImagen.addEventListener("mouseover", crecer);
        imgImagen.addEventListener("mouseout", disminuir);

    };

    this.off = function(){
        imgImagen.removeEventListener("mouseover", crecer);
        imgImagen.removeEventListener("mouseout", disminuir);
               window.clearTimeout(tmpTemporizador); 

        //Se pone la imagen en su estado inicial
        imgImagen.style.width = intAnchoInicialImagen+"px";
        imgImagen.style.height = intAltoInicialImagen+"px";
    };



  //Funciones privadas

    function crecer(){
       window.clearTimeout(tmpTemporizador); 

       //aumentar incremento
       intAltoActualImagen += intIncrementoAlto;
       intAnchoActualImagen += intIncrementoAncho;

       //si alcanzo el tamañó final
       if((intAltoActualImagen < intAltoFinalImagen) || (intAnchoActualImagen < intAnchoFinalImagen)){
            imgImagen.style.width = intAnchoActualImagen+"px";
            imgImagen.style.height = intAltoActualImagen+"px";
            tmpTemporizador = window.setTimeout(crecer, intVelocidad);
       } 

    };


    function disminuir(){
       window.clearTimeout(tmpTemporizador); 

       //disminuir
       intAltoActualImagen -= intIncrementoAlto;
       intAnchoActualImagen -= intIncrementoAncho;


       //si alcanzo el tamaño final
       if((intAltoActualImagen > intAltoInicialImagen) || (intAnchoActualImagen > intAnchoInicialImagen)){
            imgImagen.style.width = intAnchoActualImagen+"px";
            imgImagen.style.height = intAltoActualImagen+"px";
            tmpTemporizador = window.setTimeout(disminuir, intVelocidad);
       }        
    };




  //Filtrado de argumentos de la clase
  if(! (typeof estado === "boolean") )
                throw new Error("Argumento estado inválido. Debe ser un valor booleano true o false");

  //El valor por defecto de doblarVelocidad será 10.
  this.doblarVelocidad = 10;
  imgImagen = this;

  if(estado == true)
    this.on();

  else
    this.off();



}//Fin clase

var oImg1 = document.getElementById("divImagen");

oImg1.doblar(true);
<img id="divImagen" width="170" height="170" src="https://cdn.pixabay.com/photo/2012/04/12/20/12/x-30465_960_720.png"></img>

我正在做一个课堂练习,向Image.prototype添加了一个函数。图像应该用鼠标悬停在图像上两次,并在移开鼠标时撤消,但是我无法正常工作,我没有...

javascript image prototype
1个回答
0
投票

[getElementById()返回Element对象,而不是Image

© www.soinside.com 2019 - 2024. All rights reserved.