感谢这个论坛,我得到了我的代码:-)但是它需要一些微调。 该功能仅在鼠标悬停在图像上时才起作用
这是我的第一次尝试,使用悬停功能,但是在显示鼠标坐标时会发生一些奇怪的事情。 您可以在此处找到(旧的但在整个页面上工作)示例:http://designbynine.nl/Test/Test%20pagina%20follow%20mouse04.html(在Chrome中打开)
<head>
<script src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$(document).mousemove(function(event) {
var relativeX = Math.ceil(event.pageX/23);
var currentStep = relativeX*-230;
$(".model").hover(function(){
$(".model").css("background-position", 0+" "+(currentStep)+"px");
//just to check what is happeninga
$("span").text("X: " + event.pageX + ", Y: " + event.pageY)
});
});
</script>
<style type="text/css">
.model {
width: 300px;
height: 230px;
background-image: url('sprite.png');
background-position:0 4000x;
}
</style>
</head>
<body>
<div class="model" style=""></div>
<p>Data <span></span></p>
</body>
答案 0 :(得分:0)
用以下代码替换您的功能代码:
$(document).mousemove(function(event) {
var relativeX = Math.ceil(event.pageX/123);
var widthOfElement = $(".model").outerWidth();
var step = widthOfElement/300;
var currentStep = Math.ceil(relativeX/step*-231);
var hovering = false;
$("span").text("x" + event.pageX + " " + "y" + event.pageY);
$(".model").css("background-position", 0+" "+(currentStep)+"px");
if(currentStep < 1)
{
currentStep = 1;
}
});
我用函数(事件)改变了函数(e):