Javascript 图像更改鼠标移动

我对jquery和javascript仍然很陌生

每当鼠标向左移动时，我都会尝试更改图像。例如，每50像素鼠标向左移动一次，图像就会改变

我不知道从哪里开始。但我发现这是我的。 不过，我不太确定如何从那里取得进展

$( "div" ).mousemove(function( event ) {
var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
$( "span:first" ).text( "( event.pageX, event.pageY ) : " + pageCoords );
$( "span:last" ).text( "( event.clientX, event.clientY ) : " + clientCoords );
if(event.pageX){
}
});

---

我感谢所有的帮助。非常感谢。

发现了一个有趣的JSFIDLE，它可以检测鼠标移动，取自

我能够让它与四幅图像一起工作。只需创建更多类、

oldMath

变量和

else if

语句，了解更多信息

var oldMath=0；
var oldMath2=50；
var oldMath3=100；
$（'#image'）.mousemove（函数（事件）{
var startingTop=10，
开始左=22，
math=math.round（math.sqrt（math.pow（startingTop-event.clientY，2）+math.pow（startingLeft-event.clientX，2））+'px'；
$（'#currentPos'）.text（'您在：'+math）；//如果不需要跨度，请删除此行
if（Math.abs（parseInt（Math）-oldMath）>50）{
//你已经搬了5个皮克斯，把你的东西放在这里
$（'.example'）.removeClass（'example'）.addClass（'example2'）.text（'s fall！'）；
oldMath=parseInt（数学）；
}else if（Math.abs（parseInt（Math）-oldMath2）>50）{
//你已经搬了5个皮克斯，把你的东西放在这里
$（'.example2'）.removeClass（'example2'）.addClass（'example3'）.text（'it's winter！'）；
oldMath2=parseInt（数学）；
}else if（Math.abs（parseInt（Math）-oldMath3）>50）{
//你已经搬了5个皮克斯，把你的东西放在这里
$（'.example3'）.removeClass（'example3'）.addClass（'example4'）.text（'it's spring！'）；
oldMath3=parseInt（数学）；
}
});
#图像{
宽度：500px；
高度：500px；
颜色：白色；
字体大小：25px；
}
.举例{
背景：url（'http://writers.uclaextension.edu/wp-content/uploads/2013/03/summer.jpg');
}
.例2{
背景：url（'http://pcafalcons.com/wp-content/uploads/2014/10/Fall_image.jpg');
}
.例3{
背景：url（'http://cdn1.theodysseyonline.com/files/2015/12/04/635848557150633136-120303261_winter.jpg');
}
.例4{
背景：url（'http://sites.psu.edu/showerthoughts/wp-content/uploads/sites/21601/2015/03/spring-flowers-background-3.jpg');
}

悬停以更改季节
您是否有一些已经在使用的HTML和JS？如果你有一些，请张贴代码。谢谢非常感谢。