Question

我在使用自动定位鼠标悬停时显示大图像有问题。鼠标悬停时所有图像显示右侧和右侧超出边界，并且还需要额外的空间底部。这是我的代码。

$(document).ready(function() {
	$('#portfolio li').click(function() {
		// fetch the class of the clicked item
		var ourClass = $(this).attr('class');
		
		// reset the active class on all the buttons
		$('#filterOptions li').removeClass('active');
		// update the active state on our clicked button
		$(this).parent().addClass('active');
		
		if(ourClass == 'all') {
			// show all our items
			$('#portfolio').children('section.item').show(1000);	
		}
		else {
			// hide all elements that don't share ourClass
			$('#portfolio').children('section:not(.' + ourClass + ')').hide(1000);
			// show all elements that do share ourClass
			$('#portfolio').children('section.' + ourClass).show(1000);
		}
		return false;
	});
});

.Enlarge {
position:relative;
height:150px;
width:250px;
}    
.Enlarge span {
position:absolute;
left: -9999px;
visibility: hidden;
opacity: 0;-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 1s ease;
-ms-transition: opacity 1s ease;
-o-transition: opacity 1s ease;
transition: opacity 1s ease;
}
   
div.Enlarge:hover{
z-index: 999;
cursor:pointer;
}    
div.Enlarge:hover span{
 visibility: visible;
 opacity: 1;
top: 50px;
left: 0px;
width:500px;
height:300px;
padding: 5px;
background:#9f499b;

}

<section class="item brochure">
<div class="Enlarge">
    small image 1
    <span>large image 1</span>
</div>
</section>
<section class="item brochure">
<div class="Enlarge">
    smal image 2
    <span>large image 2</span>
</div>
</section>
<section class="item brochure">
<div class="Enlarge">
    small image 3
    <span>small image 3</span>
</div>
</section>
<section class="item brochure">
<div class="Enlarge">
    small image 4
    <span>large image 4</span>
</div>
</section>

here is image

Answer 1

你可以这样做：http://fiddle.jshell.net/oqzekcv8/5/

脚本将使用javascript（和jquery）来显示和隐藏图像，值得注意的一点是，如果您显示的图像的坐标与游标相同，脚本将表现不佳，所以我有偏移它们向下和向左5个像素。

如果出于某种原因，这里的小提琴是脚本本身：

$(document).ready(function() {
    $('.Enlarge').mouseenter(function(){
        $(this).find('.expandedImage').show();
        var container = $(this);
        var containerOffset = container.offset();
        var largeImage = container.find('.expandedImage');
        $(container).on('mousemove.imageFollow', function(event){
            var left = event.pageX - containerOffset.left + 5;
            var top = event.pageY - containerOffset.top  + 5;
            if(event.clientX + largeImage.width() + 5 >= $(window).width())
                left = $(window).width() - largeImage.width() - containerOffset.left -2;
            if(event.clientY + largeImage.height() + 5 >= $(window).height())
                top = $(window).height() - largeImage.height() - containerOffset.top -2;
            largeImage.css('left', left).css('top', top);
        });
    }).mouseleave(function(){
        $(this).off('mousemove.imageFollow');
        $(this).closest('.Enlarge').find('.expandedImage').hide();
    });
});

它将适用于这样的结构：

<section class="item brochure">
    <div class="Enlarge">
        small image 1
        <div class="expandedImage">large image 1</div>
    </div>
</section>

这个的css是：

.Enlarge {
    position:relative;
    height:150px;
    width:250px;
    border:1px solid black;
    overflow:visible;
}
.Enlarge .expandedImage {
    position:absolute;
    display:none;
    white-space:nowrap;
    background-color:blue;
    width:600px;
    height:300px;
    z-index:10000;
    pointer-events:none;
}

白色空间：nowrap是为了防止浏览器将您的演示文本剪切成更小的片段，如果您只显示图像而不是文本，它将无法使用

另请注意，它会在mouseenter上绑定mousemove事件并在mouseleave上解除绑定，我无法激励，我只是出于旧习惯而这样做，但现在你知道如何做到这一点：）< / p>

另请注意：pointer-events：none;据我所知，在IE浏览器中不起作用，所以只要你将指针放在展开的图像上，图像就会“保持自开”，只要你把指针放在展开的图像上（它是打算制作的）元素不接收鼠标事件）

在鼠标悬停时使用自动位置显示大图像

1 个答案: