Question

我在这个网站上发现了鼠标在这里的脚本，它工作得很好，也很容易使用。唯一的缺点是它放置图像的位置。放置图像与光标相关，并在移动鼠标时跟随图像。

问题：是否可以让图像以可见屏幕为中心显示并固定在那里？（只要鼠标悬停在文本上，就固定在位。）

脚本

    var offsetX = 180;
    var offsetY = -25;
    $('a').hover(function(e) {
    var href = $(this).attr('href');    
$('<img id="largeImage" src="' + href + '" alt="big image" />')
.css('top', e.pageY + offsetY)
.css('left', e.pageX + offsetX)
.appendTo('body');
}, function() {
$('#largeImage').remove();
});

$('a').mousemove(function(e) {
$("#largeImage").css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
});

这是CSS样式

    #largeImage {
position:absolute;
padding: .5em;
background: #e3e3e3;
border: 1px solid #BFBFBF;
color:#aa1416;
}

HTML

    <div class="largeImage">
    <li><h2><a id="item1"href="images/image6a.png">Breakfast Plates .....</a></h2>
    </div>

Answer 1

$('a').hover(function(e) {
  var href = $(this).attr('href');
  $('<img id="largeImage" src="' + href + '" alt="big image" />')
    .appendTo('body');
}, function() {
  $('#largeImage').remove();
});

$('a').mousemove(function(e) {});

#largeImage {
  position: fixed;
  padding: .5em;
  background: #e3e3e3;
  border: 1px solid #BFBFBF;
  color: #aa1416;
  left: 50%;
  top: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="largeImage">
  <li>
    <h2><a id="item1"href="images/image6a.png">Breakfast Plates .....</a></h2>
</div>

使用鼠标悬停在脚本上时使用图像弹出框

1 个答案: