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

I have problem to Display Large Image on mouse hover with auto positioning.All images on mouse hover showing right side and on right side it out of boundary and also it take extra space bottom side. here is my code.

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

$(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

这是图像

1 个解决方案

#1

You can do like this: http://fiddle.jshell.net/oqzekcv8/5/

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

The script will use javascript (and jquery) to show and hide the images, one thing worth noting is that the script will behave badly if the coordinates for the image you are showing are the same as your cursors, so i have offset them with 5 pixels down and to the left.

该脚本将使用javascript(和jquery)来显示和隐藏图像,值得注意的是,如果您显示的图像的坐标与游标相同,则脚本将表现不佳,因此我将其偏移为5像素向下和向左。

If for some reason fiddle is down here is the script itself:

如果由于某种原因,小提琴在这里是脚本本身:

$(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();
    });
});

and it will work on a structure like this:

它将在这样的结构上工作:

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

the css for this is:

这个的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;
}

the white-space:nowrap is to prevent the browser from cutting your demo text into smaller pieces, it will work without that if you only display an image instead of text

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

Also note that it binds the mousemove event on mouseenter and unbinds it on mouseleave, i can't motivate that, i just happend to do that out of old habit, but now you know how to do that as well :)

还要注意它在mouseenter上绑定mousemove事件并在mouseleave上取消绑定它,我无法激励它,我只是出于旧习惯而这样做,但现在你知道如何做到这一点:)

Also note: pointer-events:none; does not work in IE as far as i know, so the image will "keep it self open" if you get it to the lower right corner of the page as long as you keep your pointer over the expanded image (it is intended to make the element not receive mouse events)

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

#1