Question

HTML

<img src="xxxx.png"/>

CSS

div#centered-div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: red;
}

JAVASCRIPT

$.fancybox.open(getFancyArray(image), {
       afterShow: function () {
                var tpl = '<div id="centered-div"></div>';
                $(ui.fancyboxInner).append(tpl);
                $(ui.fancyboxInner).zoom({
                    callback: function () {
                     $(ui.fancyImage).trigger('mousemove');
                     $("centered-div").trigger('mouseenter');

                 }
             });
         },
   }

我正在打开fancybox图像，一旦花哨显示图像，它将调用afterShow事件然后缩放组件将初始化图像。初始化后我需要触发悬停效果到图像来处理悬停效果。

第一个问题是如果我不触发mouseenter用户应该从容器出去再次进入init缩放事件

缩放组件：（http://www.jacklmoore.com/zoom/）

我需要的是触发鼠标进入图像的中心。通过这个我可以开始另一种方法，它自动期待悬停效果

Answer 1

看看这个：

（编辑：漂亮小提琴）

https://jsfiddle.net/zjxqLc8x/

$(img).mousemove(function(e){
    var parentOffset = $(this).parent().offset(); 
    var relX = e.pageX - parentOffset.left;
    var relY = e.pageY - parentOffset.top;
});

这样，每次用户将鼠标悬停在图像上时，您都可以获得鼠标的位置。这样，您可以检查鼠标是否在您想要的图像部分内（在您的案例中居中）并采取相应的行动。

以下是将鼠标悬停在图像中心上方时更改边框颜色的示例：

https://jsfiddle.net/zjxqLc8x/1/

//getting the center +-20px so the user is actually able to find it

var minheight = $("#imageholder").height() / 2 -20;
var minwidth = $("#imageholder").width() / 2 -20;
var maxheight = $("#imageholder").height() / 2 +20;
var maxwidth = $("#imageholder").width() / 2 +20;


//check position on hover

$('#imageholder').mousemove(function(e){
var parentOffset = $(this).parent().offset(); 
   var relX = e.pageX - parentOffset.left;
   var relY = e.pageY - parentOffset.top;
   $('#mousex').html(relX);
   $('#mousey').html(relY);


   //if the mouse is in the correct position, we change the border color

   if ((relX >= minwidth) && (relX <= maxwidth) && (relY >=minheight) && (relY <= maxheight)) {
       $('#imageholder').css('border', '1px solid red');
   } else {
       $('#imageholder').css('border', '1px solid blue');
   }

});

触发鼠标中心到图像中心

1 个答案: