移动鼠标，但仅在 div 的宽度上

Question

I just adapted this code to play a sequence of images when you move the mouse on the x axis. I have two questions about this code:

• I can't adapt the length to the width of the div, not to the width of the whole window.
• There are "flashes" when I move the mouse, I have the impression that it comes from the loading of the images?

Thanks for your help.

Live: https://codepen.io/nicolastilly/pen/jOBKxKK

Code:

var blocWidth;
var imgblock = ['https://assets.codepen.io/265602/frame0.png', 
                'https://assets.codepen.io/265602/frame1.png',
                'https://assets.codepen.io/265602/frame2.png',
                'https://assets.codepen.io/265602/frame3.png',
                'https://assets.codepen.io/265602/frame4.png',
                'https://assets.codepen.io/265602/frame5.png',
                'https://assets.codepen.io/265602/frame6.png',
                'https://assets.codepen.io/265602/frame7.png',
                'https://assets.codepen.io/265602/frame8.png',
                'https://assets.codepen.io/265602/frame9.png',
                'https://assets.codepen.io/265602/frame10.png',
                'https://assets.codepen.io/265602/frame11.png',
                'https://assets.codepen.io/265602/frame12.png',
                'https://assets.codepen.io/265602/frame13.png',
                'https://assets.codepen.io/265602/frame14.png',
                'https://assets.codepen.io/265602/frame15.png',
                'https://assets.codepen.io/265602/frame16.png',
                'https://assets.codepen.io/265602/frame17.png',
                'https://assets.codepen.io/265602/frame18.png',
                'https://assets.codepen.io/265602/frame19.png',
                'https://assets.codepen.io/265602/frame20.png'];

function onMouseMove(e) {
    var x = e.pageX;
    var theimg = imgblock[parseInt(x / blocWidth * imgblock.length)];
    $('.bloc1').css("background-image", "url('" + theimg + "')");
}

function onResize() {
    blocWidth = $('.bloc1').width();
}

function onResize() {
    blocWidth = $(document).width();
}

$(window).on('mousemove', onMouseMove);
$(window).resize(onResize);
onResize();

Answer 1

As for flickering, you can circumvent that by preloading the images

let loaded = 0 ;
imgblock.forEach(url => {
    let img=new Image();
    img.src=url;
    img.onload = onImgLoaded
})

function onImgLoaded() {
    loaded++;
    if (loaded == imgblock.length-1) console.log('all images have pre-loaded');
}

As for the sizing issue, you need to take into account if you're mousing over the target and accounting for the div's left value in your calculations. Get rid of both these:

function onResize() {
    blocWidth = $('.bloc1').width();
}

function onResize() {
    blocWidth = $(document).width();
}

replace with:

let blocStartX;
function onResize() {
    let pos = $(".bloc1")[0].getBoundingClientRect()
    console.log(pos)
    blocWidth = pos.width;
    blocStartX = pos.x 
}

Detect the mouseover:

let isOnDiv = false
$(".bloc1").mouseenter(function(){isOnDiv=true;});
$(".bloc1").mouseleave(function(){isOnDiv=false;});

and add this to the top of your mousemove function:

if (!isOnDiv) return
var x = e.pageX - blocStartX;

https://codepen.io/john-tyner/pen/wvJXXQZ