在图像缩略图上水平滚动,并在鼠标悬停时弹出图像

时间:2013-07-13 15:41:39

标签: javascript css html5 hover overflow

我在html和css中编写了一些代码,在图像缩略图上水平滚动,并在鼠标悬停时弹出它们。问题是当我可以水平滚动时,鼠标悬停时弹出的(放大的)图像只能在包含它的div中可见。我希望它在页面上的其他内容上可见。但是由于我通过创建div overflow-x:scroll的属性来创建滚动条,所以如果它大于div,则必须滚动才能看到放大的图像。当我没有看到要滚动的overflow-x属性时,我可以像我想要的那样在其他所有内容上查看放大的图像,但所有其他缩略图也是可见的。这是一段代码片段,展示了我的所作所为。

HTML

<div id="example1">
<h1>This is an example</h1>
<h2>Car 1</h2>
<div class="scroll">
<div id="example1_car1">
<a class="thumb" href="#"><img src="car1.jpg" alt="car1" height="200" width="251"><span>   <img src="car1.jpg" alt="car1"></span></a>
<a class="thumb" href="#"><img src="car2.jpg" alt="car2" height="200" width="251"><span><img src="car2.jpg" alt="car2"></span></a>
<a class="thumb" href="#"><img src="car3.jpg" alt="car3" height="200" width="251"><span><img src="car3.jpg" alt="car3"></span></a>
</div><!--example1_car1-->
</div><!--example1_scroll-->
<h2>Car 2</h2>
<div class="scroll">
<div id="example1_car2">
<a class="thumb" href="#"><img src="car1.jpg" alt="car1" height="200" width="251"><span><img src="car1.jpg" alt="car1"></span></a>
<a class="thumb" href="#"><img src="car2.jpg" alt="car2" height="200" width="251"><span><img src="car2.jpg" alt="car2"></span></a>
<a class="thumb" href="#"><img src="car3.jpg" alt="car3" height="200" width="251"><span>  <img src="car3.jpg" alt="car3"></span></a>
</div><!--example1_car2-->
</div><!--example2_scroll-->
</div><!--example1-->

CSS
#example1_car1,#example1_car2,.scroll{
   position:relative;
}

#example1_car1, #example1_car2
{
  width:2400px;
  height:200px;
  z-index:0
}

.scroll
{
   width:800px;
   height:210px;

   overflow-x:scroll;
   z-index:0;
}

.thumb img {
    border:1px solid #000;
    margin:3px;
    float:left;
    zindex:-1;
}
.thumb span {
    position: relative;/*absolute;*/
    display:none;
}
.thumb:hover, .thumb:hover span {
    display:inline;
    top:0; left: 0px;
    /*z-index:1;*/
    z-index:10;
}

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

要使放大的图像显示在可滚动区域的顶部/外部,它必须实际上位于其外部。

要使放大的图像显示在,当将鼠标悬停在可滚动区域 内的缩略图上时,您需要在HTML上使用JavaScript并且CSS。

这是an example on jsfiddle,其中我没有更改您的HTML结构。相反,当你将鼠标悬停在缩略图上时,我使用jQuery克隆可滚动区域之外的放大图像并将其附加到#example1 div。

JavaScript部分:

$('.thumb').hover(
    function(){
        var thumb = $(this).children('img');
        var large = $(this).find('span>img').clone();
        $('#example1').append(large);
        large.addClass('enlargedImg');
        large.css({
            'top': thumb.offset().top,
            'left': thumb.offset().left
        });
    },
    function(){
        $('.enlargedImg').remove();
    }
);

我使用拇指图像的offset()值将放大的图像直接放在它上面。你可能想稍微移动它,但希望这足以让你开始。