在Jquery中使用鼠标移动背景图像

Question

我找到了这个snippet of code，并为我的网站调整了一下：

 var vH=jQuery('.categoryWrapper').height();
    var vW=jQuery('.categoryWrapper').width();
    var vT=jQuery('.categoryWrapper').offset().top;
    var vL=jQuery('.categoryWrapper').offset().left;
    jQuery('.categoryWrapper').mousemove(function(e){
        var ypos=e.pageY-vT;
        var xpos=e.pageX-vL;
        var y=Math.round(ypos/vW*100);
        var x=Math.round(xpos/vH*100);

        jQuery(this).css({backgroundPosition: x+'% '+y+'%'});

然而，它并没有完全按照我的意愿行事，而且我很难调整它以便正常工作。

转到http://photoshop.tutorialcraft.com，将鼠标移到“Photoshop教程”，“图形灵感”和“图形下载”按钮上。

基本上，我有一个带径向渐变的PNG文件。我希望背景跟踪鼠标，但移动速度比鼠标快一点。

例如，.categoryWrapper为312 x 88像素。实际背景img是277x277。如果我通过.categoryWrapper的顶部移动鼠标，则bg IMG的中心应该比鼠标输入点高出约200px。当您将鼠标移动到底部时，背景应移动到鼠标下方大约200px（这样，当您进出时，bg img会出现并消失）。 下面的图片应该说明我想要做的事情：

Answer 1

不应该这个

var y=Math.round(ypos/vW*100);
var x=Math.round(xpos/vH*100);

是这样的

var y=Math.round(ypos/vH*100);
var x=Math.round(xpos/vW*100);

因为x是水平（=＆gt;宽度）而y是垂直（=＆gt;高度）轴？

我很确定一旦你改变它，它将按预期工作。

编辑：

您还应确保将vH，vW，vT和vL设置为当前元素的相应属性，即

 //Gradient Effect
jQuery('.categoryWrapper').mousemove(function(e){
    var vH=jQuery(this).height();
    var vW=jQuery(this).width();
    var vT=jQuery(this).offset().top;
    var vL=jQuery(this).offset().left;
    var ypos=e.pageY-vT;
    var xpos=e.pageX-vL;
    var y=Math.round(ypos/vH*100);
    //var x=Math.round(xpos/vW*100);
    var x=Math.round((xpos/vW*100 - 50)*15);
    jQuery(this).css({backgroundPosition: x+'% '+y+'%'});
    jQuery('#x').text(x);
    jQuery('#y').text(y);

通过在mousemove处理程序之外设置它们，它们根据'.categoryWrapper'选择器返回的整个集合获取值，而不仅仅是mousemove <时刻鼠标下的元素/ p>