寻找方法，我找到了几个很好的解释，并最终结合起来。当我将鼠标悬停在图像本身上时，我只是做悬停效果时，一切正常，但是当将鼠标悬停在“配置文件”上时试图使其工作似乎导致了一些问题。目前，它有时也会在不超过div的情况下进行像素化，因此它仍然介于mouseover和mouseout状态之间。
在HTML中，我正在创建一个使用同位素的人的可过滤目录，其中包含一堆像这样的块：
<div class="item profile p-1 undergrad research">
<div class="profile-image">
<img src="img.jpg">
</div>
<div class="profile-text">
<h1>Name</h1>
<h2>Position</h2>
<p>
Email:email@gmail.com<br>
Phone: 123.345.6567<br>
Office: 2818
</p>
</div>
</div>
我现在正在使用javascript来处理像素化的东西，但说实话我对Jquery更熟悉和舒适，所以这是一次艰苦的学习经历。下面是整个代码，但我将解释我改变了什么，这开始了我的问题。
最初，设置中的“项目”正在使用 .profile-image 对象，我将其更改为 .profile 对象，因此我可以使用“.profile”div作为具有mouseover事件侦听器的对象。此时我介绍了“block”，我将事件监听器切换为“element”。
// Most of the structure taken from Noel Delgado
// @pixelia_me => http://codepen.io/noeldelgado/pen/FmEBh
// The actual pixelation taken from Ken Fyrstenberg Nilsen
// http://jsfiddle.net/AbdiasSoftware/QznT7/
// http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
/*
** =======================================================================
** Animation
** =======================================================================
*/
var lastTime = 0;
var vendors = ['webkit', 'moz'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame =
window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function(){callback(currTime +
timeToCall);},
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
/*
** =======================================================================
** Pixelation
** =======================================================================
*/
/*============================="Setup"===============================*/
var PIXELATION = 36,//The value when hovering. Lower numbers are more
pixelated, while 100 is not at all
speed = 4,//How quickly it animates.
play = false;//Is the animation "playing"?
var items = document.querySelectorAll('.profile'),//The parent of everything.
_objs = [];//Array that will be filled with our images
/*===================Images Object "Class Constructor"=====================*/
var Images = function( block, element, image, canvas, context ) {
this.block = block;
this.element = element;
this.image = image;
this.canvas = canvas;
this.context = context;
this.pixelation = 100;
}
//Called by Array.prototype.slice
Images.prototype.bindLoad = function() {
var obj = this;
this.image.onload = function() {
obj.reportLoad.call(obj);
};
if ( this.image.complete ) {
this.image.onload();
}
}
//Called by Images.prototype.bindLoad
Images.prototype.reportLoad = function() {
var obj = this;
size = (play ? v : 100) * 0.01,
w = this.width * size;
h = this.height * size;
this.imageWidth = this.canvas.width = this.image.width;
this.imageHeight = this.canvas.height = this.image.height;
this.context.drawImage(this.image, 0, 0, w, h);
this.context.drawImage(this.image, 0, 0, w, h, 0, 0,
this.element.width, this.element.height);
//Turn off image smoothing so we get the pixelated effect
this.context.mozImageSmoothingEnabled = false;
this.context.webkitImageSmoothingEnabled = false;
this.context.imageSmoothingEnabled = false;
this.block.addEventListener('mouseover', function() {
obj.mouseOver();
}, false);
this.block.addEventListener('mouseout', function() {
obj.mouseOut();
}, false);
}
/*=====================Images Object MouseOver Function======================*/
Images.prototype.mouseOver = function() {
var obj = this,
play = true;
cancelAnimationFrame( obj.idUndraw );
var draw = function() {
if ( obj.pixelation <= PIXELATION ) {
play = false;
cancelAnimationFrame( obj.idDraw );
obj.pixelation = PIXELATION;
} else {
obj.pixelate( obj.imageWidth, obj.imageHeight, 0, 0 );
obj.idDraw = requestAnimationFrame( draw, obj.context );
}
};
obj.idDraw = requestAnimationFrame( draw, obj.context );
}
/*====================Images Object MouseOut Function==================*/
Images.prototype.mouseOut = function() {
var obj = this,
play = true;
cancelAnimationFrame( obj.idDraw );
var undraw = function() {
if ( obj.pixelation > 98 ) { //New Code
play = false;//New Code
cancelAnimationFrame( obj.idUndraw );
obj.pixelation = 98;
} else {
obj.depixelate( obj.imageWidth, obj.imageHeight, 0, 0 );
obj.idUndraw = requestAnimationFrame( undraw, obj.context );
}
};
obj.idUndraw = requestAnimationFrame( undraw, obj.context );
}
/*=================Images Object Pixelation Calculation===================*/
//Called by Images.prototype.pixelate & depixelate
Images.prototype.setPixels = function() {
size = this.pixelation * 0.01;
w = this.image.width * size;
h = this.image.height * size;
this.context.drawImage(this.image, 0, 0, w, h);
this.context.drawImage(this.canvas, 0, 0, w, h, 0, 0,
this.canvas.width, this.canvas.height);
}
/*====================Images Object Pixelation Methods=====================*/
//Called by Images.prototype.mouseOver
Images.prototype.pixelate = function() {
this.pixelation -= speed;
this.setPixels();
}
//Called by Images.prototype.mouseOut (Line 113)
Images.prototype.depixelate = function() {
this.pixelation += speed;
this.setPixels();
}
/*=============================Create Array of images=====================*/
//It all seems to start here. Don't really know how this gets called
//though unfortunately...
Array.prototype.slice.call(items, 0).forEach(function(el, i) {
var block = el,
element = el.querySelector('.profile-image'),
image = element.querySelector('img'),
canvas = document.createElement('canvas'),
context = canvas.getContext('2d');
element.appendChild( canvas );
_objs.push( new Images( block, element, image, canvas, context ) );
_objs[i].bindLoad();
});
答案 0 :(得分：0)
假设它直接处理图像，那个脚本非常紧凑。您可以尝试将其置于原始状态，然后使用一些jquery触发它来伪造它。
$('.profile').on('hover', function(){
$(this).find('img').trigger('mouseenter');
}), function(){
$(this).find('img').trigger('mouseleave');
});
mouseenter换成mouseover或http://api.jquery.com/category/events/mouse-events/ 中的其他内容