1

私のウェブページにはいくつかの画像があり、マウスが画像にアクセスしたときにボックス (画像に関する詳細情報) を表示したいと考えています。また、ボックスの位置がマウスの位置と正確に一致し、マウスの動きに合わせて移動することも必要です。これは私のコードですが、動作しません。問題は、Firefox ではボックスとマウスが垂直方向 (水平方向ではなく) に配置されていることですが、Chrome ではボックスとマウスが水平方向 (垂直方向ではありません) に配置されています。

<div class="library_teaser_photo_class">
<div class="book_detail" style="display:block;visibility :hidden;position: fixed;">
<?php print $fields['field_library_writer']->content; ?> 
</div>
<?php print $fields['field_library_photo']->content; ?>
</div>

これはjQueryコードです

var offsetX = 10;
var offsetY = 20;
$('.library_teaser_photo_class').hover(function(e)
{
if (e.pageX || e.pageY) 
    {
    posx = e.pageX;
    posy = e.pageY;
}
else if (e.clientX || e.clientY)    
    {
     posx = e.clientX + document.body.scrollLeft
                          +   document.documentElement.scrollLeft;
     posy = e.clientY + document.body.scrollTop
                          +document.documentElement.scrollTop;
}
    $(this).find('.book_detail').css('visibility','visible')
                                .css('top',posy + offsetY)
                    .css('left',posx + offsetX);
},function(){
        $(this).find('.book_detail').css('visibility','hidden');
});

$('.library_teaser_photo_class').mousemove(function(e){
    if (e.pageX || e.pageY)
            {
          posx = e.pageX;
          posy = e.pageY;
    }
    else if (e.clientX || e.clientY) 
            {
    posx = e.clientX+document.body.scrollLeft
                             +document.documentElement.scrollLeft;
    posy = e.clientY + document.body.scrollTop
                             +document.documentElement.scrollTop;
}
$(this).find('.book_detail').css('top',posy ).css('left',posx );
});
4

1 に答える 1

0 
var mouseX;
    var mouseY;
    $(document).mousemove( function(e) {
       mouseX = e.pageX; 
       mouseY = e.pageY;
    });  
    $('.library_teaser_photo_class').mouseover(function(){
      $(this).find('.book_detail').css({'top':mouseY,'left':mouseX}).fadeIn('slow');
    });


the function above will make the DIV appear over the link wherever that may be on the page. It will fade in slowly when the link is hovered. You could also use .hover() instead. From there the DIV will stay, so if you would like the DIV to disappear when the mouse moves away, then,

    $('.library_teaser_photo_class').mouseout(function(){
     $(this).find('.book_detail').fadeOut('slow');
    });

If you DIV is already positioned, you can simply use

    $('.library_teaser_photo_class').hover(function(){
      $(this).find('.book_detail').fadeIn('slow');
    });

また、DIV スタイルdisplay:none;をフェードインまたは表示するには、DIV スタイルを に設定する必要があることに注意してください。

于 2013-10-05T07:45:09.303 に答える