用鼠标位置改变图像 [英] changing a image with mouse positions

问题描述

我的页面顶部有一个图像，希望它从静止变为左，然后根据您在页面上的鼠标位置而改变。请帮帮我

I have a image at the top of my page and want it to change from stationary to left then right depending on your mouse position on the page. please help me

推荐答案

最好的办法是利用 mousemove 功能在文档上，然后使用事件参数跟踪鼠标位置。

Your best bet is to utilize the mousemove function on the document and then track the mouse location by using the event parameter.

这是一个 JSFiddle示例。

$(document).mousemove(function(event){
    var mloc = {
        x: event.pageX,
        y: event.pageY
    };

    if( 
        (mloc.x >= 0 && mloc.x <= $(document).width()/2) &&
        (mloc.y >= 0 && mloc.y <= $(document).height()/2)
    ){
        //In upper left corner
        //Do stuff
    }else if( 
        (mloc.x >= $(document).width()/2 && mloc.x <= $(document).width()) &&
        (mloc.y >= 0 && mloc.y <= $(document).height()/2)
    ){
        //In upper right corner
        //Do stuff
    } //etc
}); 

这是关于鼠标跟踪的教程。

这里有一大堆可用的事件。

Here's a tutorial on mouse tracking.
Here's a whole bunch of available event stuff.

特别是这里的 pageX 和 pageY 。

In particular, here's pageX and pageY.

这篇关于用鼠标位置改变图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！