2
Ich habe einen Bild-Slider gemacht, der Bilder von links nach rechts bewegt, und ich möchte ihre Größe vergrößern, wenn der Benutzer über sie mauset und ihre Größe verkleinert, wenn die Maus geht. Das funktioniert, aber nur einmal. Ich denke, es könnte etwas damit zu tun haben, wie ich die Event-Listener deklariert habe. Hier ist ein funktionierendes Beispiel: (http://www.public.asu.edu/~drwarner/imageslider/scrolling_Banner.html) und hier ist mein Code:mouseenter/mouseleave funktioniert nur einmal
<script>
var images = [];
var imagePosition = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var cycle;
var hoverImagePosition;
window.onload = function scrolling() {
for (i = 0; i < 10; i++) {
images.push(document.getElementById("scrollingImage" + i));
if (document.addEventListener) {
// For all major browsers, except IE 8 and earlier
document.getElementById("scrollingImage" + i).addEventListener("mouseenter", imageBigger);
document.getElementById("scrollingImage" + i).addEventListener("mouseleave", imageSmaller);
} else if (document.attachEvent) {
// For IE 8 and earlier versions
document.getElementById("scrollingImage" + i).attachEvent("mouseenter", imageBigger);
document.getElementById("scrollingImage" + i).attachEvent("mouseleave", imageSmaller);
}
}
cycle = setInterval(frame, 100);
};
function frame() {
for (x = 0; x < 10; x++) {
if (imagePosition[x] == 100) {
imagePosition[x] = 0;
} else {
imagePosition[x] = imagePosition[x] + 1;
images[x].style.left = imagePosition[x] + '%';
}
}
}
function imageBigger() {
clearInterval(cycle);
this.style.zIndex = 1;
this.style.width = 25 + "%";
hoverImagePosition = parseInt(this.style.left) - 2.5;
this.style.left = hoverImagePosition + "%";
}
function imageSmaller() {
cycle = setInterval(frame, 100);
this.style.zIndex = -1;
this.style.width = 20 + "%";
hoverImagePosition = parseInt(this.style.left) + 2.5;
this.style.left = hoverImagePosition + "%";
}
</script>
Warum Sie nicht nur verwenden Stylesheet? –
Warum ein anderer Beitrag von im Grunde die gleiche Frage? https://stackoverflow.com/questions/44223122/javascript-mouseleave-event-not-working-when-elements-move-away-from-pointer –
Nirgendwo in der Nähe der gleichen Frage. Gleiches Stück Code, andere Frage. Wie ist es aus der Ferne die gleiche Frage? Die andere Frage bezog sich auf Bilder, die sich vom Mauszeiger wegbewegten und dennoch den "Mouseover" -Effekt beibehalten (was sie nicht sollten, seit sie sich vom Zeiger wegbewegt haben). Ich habe dieses Problem beseitigt, indem ich die Bewegung der Bilder komplett gestoppt habe auf "mouseover" und erzeugte dieses neue Problem. Das alte Problem ist immer noch ungelöst. pvg schlug vor, elementFromPoint() zu verwenden, aber das hat eine gute Cross-Browser-Kompatibilität. – Mangofett