我将图片库组织为<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;
});
});
});
答案 0 :(得分:1)
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
然后我通过css为.gallery_clone:hover
设置动画,但你可以在jquery中做到这一点我想,在.gallery_clone上添加一个mouseenter事件
编辑:我真的从我的脚本中复制/粘贴,因此您必须将此代码调整为您的HTML
nb:给css anim a go,即使年龄大,也不会动画,这是值得的; (我也为同一个画廊制作了lightbox效果几乎纯粹的CSS - 稍后会发布,还没有为插件发布做好准备,对不起)
nb2:那部分"+$i.parent().parent().attr("class")
是因为在cms中他们可以选择画廊背景颜色,因此将该类添加到背景颜色&amp;克隆的其他画廊风格(即你不应该需要它)