我正在做课堂练习,向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添加了一个函数。图像应该用鼠标悬停在图像上两次,并在移开鼠标时撤消,但是我无法正常工作,我没有...
[getElementById()
返回Element
对象,而不是Image