[英]grow/shrink image gallery with jquery WITHOUT affecting the layout
我将图像画廊组织为<ul>
。 所有图像都在<li>
元素中,当我将鼠标移到其中一张图片上时,它应该增长以为用户提供视觉反馈。 问题是,当我仅使用animate()更改图像的大小时,其他图片将随着调整大小后的图像占用更多空间而被推到一边。
因此我克隆了图像元素,将其浮动在原始图像上,然后调用动画。 随之而来的问题是,一旦克隆的图像弹出,就会调用onMouseOut()。 所以我需要一个嵌套的hover()函数,这使事情变得复杂。
我遇到两个错误,我找不到导致它们的原因。 第一个是animate()不会让克隆的图像超出其原始图像的右边界,第二个是,当我将鼠标快速移到图库上时,我得到了奇怪的增长/收缩行为。
的HTML:
<ul id="gallery1" class="gallery_container">
<li class="frame">
<a href=""><img src="pic1.jpg" class="picture" /></a></li><li class="frame">
<a href=""><img src="pic2.jpg" class="picture" /></a></li><li class="frame">
<a href=""><img src="pic3.jpg" class="picture" /></a></li>
</ul>
CSS:
.picture
{
height: 200px;
border: 0px;
margin: 0px;
padding: 0px;
}
.frame
{
display: inline-block;
position: relative;
margin: 0px;
margin-right:8px;
padding: 0px;
}
.frame a
{
padding: 0px;
margin: 0px;
}
.gallery_container
{
height: 200px;
width: 150%;
position: relative;
top: 4px;
padding: 0px;
margin: 0px;
}
最后是让我头疼的代码:
$(document).ready(function()
{
var zooming = false;
var zoom = 4;
var speed_zoom = 100;
$('.gallery_container li a').hover(function(element)
{
// disable zooming to prevent unwanted behavior
if(zooming) return;
zooming = true;
$(this).after( $(this).clone(false) );
$(this).next().attr('id', 'focus_frame');
},
function(element) // when the new element pops up, onmouseout is triggered, since the focus_frame is in front of the image
{
$(this).next().hover(function(element)
{
// we need to re-position the element in the dom-tree, since it needs to grow out of a container with overflow: hidden
$('#focus_frame img').animate({'left' : zoom * -1, 'top' : zoom * -1, 'height' : 200+(zoom*2), 'width' : $('#focus_frame img').outerWidth() + (zoom*2)}, speed_zoom);
},
function(element)
{
$(this).remove();
zooming = false;
});
});
});
var $doc=$(document.body)
$doc.on({
"mouseenter" : function (e) {
$doc.find("> .gallery_clone").remove();
var $i=$(this).parent();
$i.pos = $i.offset();
$i.clone()
.addClass("gallery_clone "+$i.parent().parent().attr("class"))
.css({
top:(Math.round($i.pos.top)-3)+"px"
,left:(Math.round($i.pos.left)-3)+"px"
,width:$i.width()
}).appendTo($doc);
}
},
" ul > li > img"
).on ({
"mouseleave" : function (e) {
$(this).remove();
},"> .gallery_clone");
在CSS .gallery_clone
中的position:absolute
是position:absolute
然后我通过CSS为.gallery_clone:hover
设置动画,但是我想也可以在jquery中做到这一点,在.gallery_clone edit上添加mouseenter事件:我从字面上复制/粘贴了我的脚本,因此您必须调整此代码到你的html
nb:给css动画一个机会,即使年纪大了也值得动画; (我也为同一个图库制作了灯箱效果几乎是纯CSS的文档-稍后会发布,暂时不准备用于插件发布,抱歉)
nb2:该部分"+$i.parent().parent().attr("class")
是因为在cms中他们可以选择图库背景色,因此将该类添加背景色和其他图库样式到克隆中(即你不应该需要它)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.